@agile-ts/react

Extension to combine Agile with React or React-Native

Usage no npm install needed!

<script type="module">
  import agileTsReact from 'https://cdn.skypack.dev/@agile-ts/react';
</script>

README

React Integration

Integrate AgileTs into React or React-Native


GitHub License npm version npm minified size npm total downloads

What does this Integration?

The react package helps us to integrate AgileTs into a React environment and serves as an Interface to React. Its main task is to bind States to React Components. This binding ensures that AgileTs rerender the Component whenever a bound State mutates. It also offers some other valuable functionalities that optimize the workflow using AgileTs in a React project.

A distinction is made between Functional and Class Components. As we prefer to use React Hooks in Functional Components but Hooks aren't supported in Class Components. Therefore, we have created alternatives for Class Components in order to offer the same 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.

// -- myComponent.jsx ------------------------------------------

// Binds MY_FIRST_STATE to myComponent
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 Component.

// -- myComponent.jsx ------------------------------------------

// Binds MY_FIRST_STATE to myComponent
export default AgileHOC(myComponent, [MY_FIRST_STATE]);

To find out more about the AgileHOC and AgileTs in Class Components, checkout 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.0.15+ v0.0.16+ v6+ 16.8+ Yes
v0.0.7 - v0.0.14 v0.0.7 - v0.0.15 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