Introduction

Use AgileTs with React and React-Native


GitHub Licensenpm versionnpm minified sizenpm total downloads

โ“ react#

The react package is an Integration of AgileTs into 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 useful functions that optimize the workflow with AgileTs in a React Environment.

A distinction is made between Functional and Class Components, as we prefer using React Hooks in Functional Components. But Hooks aren't supported in Class Components, so we came across other solutions, to offer the same features there too.

๐Ÿ† Functional Component#

In Function Components we recommend using AgileTs Hooks like useAgile, which allows us to bind any State to our React Component

// -- 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 docs.

๐Ÿฆ– Class Component#

In Class Component we currently only support the AgileHOC, which helps us binding States to our Component. It is a Higher order Component that gets wrapped around our React Component.

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

To find out more AgileTs in Class Components, checkout the AgileHOC docs.

๐Ÿš€ Quick Links#

Last updated on