Nurturing Pluto's Martians

    @agile-ts/react
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.3 • Public • Published

    React Integration

    Integration for React and React-Native


    GitHub License npm version npm minified size npm total downloads

    What does this Integration?

    The react package is a set of utilities that simplifies the way AgileTs is integrated into a React environment. Think of it as an extension of AgileTs in the context of React that serves as an interface to React Components. The main task of the react integration is to bind AgileTs States to React Components. This ensures that AgileTs will re-render the Component when the bound State changes. It also provides some other valuable functionalities that optimize the workflow with AgileTs in a React project.

    A distinction is made between Functional and Class Components. As we prefer to use React Hooks in Functional Components, however, Hooks aren't supported in Class Components. Therefore, we have created alternatives for Class Components in order to offer the most essential functionalities there as well.

    🐆 Functional Component

    In Functional Components we recommend using AgileTs Hooks like useAgile(). The useAgile() Hook binds Agile Sub Instances (like States or Collections) to React Components for reactivity.

    // -- MyComponent.jsx ------------------------------------------
    
    // Binds MY_FIRST_STATE to 'MyComponent.jsx' for reactivity
    const myFirstState = useAgile(MY_FIRST_STATE);

    To find out more about useAgile(), and other Hooks provided by AgileTs, checkout the AgileTs Hook documentation.

    🦖 Class Component

    For Class Components, we provide the AgileHOC. The AgileHOC is a Higher Order Component that is wrapped around a React Component. It takes care of binding Agile Sub Instances (like States or Collections) to the wrapped React Components for reactivity.

    // -- MyComponent.jsx ------------------------------------------
    
    // Binds MY_FIRST_STATE to 'MyComponent.jsx' for reactivyty
    export default AgileHOC(myComponent, [MY_FIRST_STATE]);

    To find out more about the AgileHOC and how to correctly use AgileTs in Class Components, take a look at the AgileHOC documentation.



    Installation

    npm install @agile-ts/react
    

    The react package is an extension of AgileTs and doesn't work without the core package, which functions as the brain of AgileTs and is indispensable. Unfortunately, we can't combine each core with react version. Therefore, we have created a table that shows which versions fit together without restrictions.

    @agile-ts/react @agile-ts/core NPM Version Supported React versions Supports hook based components
    v0.1.2+ v0.1.2+ v6+ 16.8+ Yes

    Older Versions aren't supported anymore



    Documentation

    Sounds AgileTs interesting to you? Checkout our documentation, to learn more. And I promise you, you will be able to use AgileTs in no time. If you have any further questions, don't hesitate to join our Community Discord.



    Contribute

    Get a part of AgileTs and start contributing. We welcome any meaningful contribution. 😀 To find out more about contributing, check out the CONTRIBUTING.md.

    Maintainability

    Install

    npm i @agile-ts/react

    DownloadsWeekly Downloads

    81

    Version

    0.2.3

    License

    MIT

    Unpacked Size

    116 kB

    Total Files

    43

    Last publish

    Collaborators

    • bennodev