Cratebox bindings for React in just 818B of gzipped code (2.02KB bundle).
Contents
Installation
NPM
npm install cratebox-react
Yarn
yarn add cratebox-react
Getting Started
To get started with Cratebox React first of all you need to import the dependency into your project plus cratebox: ^2.1.0
Note: React 16.12.x is a peer dependency of this project, meaning that, without the React library, Cratebox React won't work and therefore, you need to have it as a depencendy of your project.
;// Import our cratebox stuff// Import create context and consumer; ; ; ; ; const userState: UserState = name: "Alex" lastName: "Casillas"; const userViews = state: UserState: fullName: ` `; const userActions = state: UserState: { statename = name; } { statelastName = lastName; }; const userStore = ; const stores = id: 'user-store' store: userStore ; // Now you can make use of your cratebox at your app this way.const App = <CrateboxProvider stores=stores> ... </CrateboxProvider>;
React Hooks
useStore
useStorestore: string:
Note: The code bellow is based on the example from above.
the useStore
hook requires the name of the store you'd like to connect to. After that, it will return you an object with the state
, views
and actions
that are declared on your store
import React from "react";import useStore from "cratebox-react";import UserState UserViews UserActions from "types/types.file"; { const state views actions = useStore<UserState, , > "user-store" ; return <> <h3>Hello viewsfullName</h3> <button = > Wanna change your name through an action? </button> <button = > Or better force change your name? </button> </> );}
useActions
If on the other hand, you only need to dispatch data from a component and don't want it to be rendered when data changes on the store, you can just useActions (no pun intended) wich is like useStore but simpler due to it only takes actions types and store identifier and returns the actions of the given store.
import React from "react";import useStore useActions from "cratebox-react";import UserActions from "types/types.file"; { const actions = useActions<UserActions>"user-store"; return <button = > Change name on the store but re-render this component </button> ;}