A React high level component that holds all its logic inside.
Works with any react Architecture out there - at the end react-indie outputs a simple React component.
There are cases that you want to have in your react code an independent component that is not connected to the rest of the application global store (e.g. redux).
I'm not talking about pure stateless components but on state-full components that don't need to share their knowledge with the rest of the app; an example to that kind of component can be a weather widget that gets the current temperature from a remote server and doesn't affect the rest of your app.
react-indie
API follows the conventions of other high order components:
indie(Component, propsConfig, onResolve)
Component: the react component to wrapper
propsConfig: and object with keys that mach the Component`s props. the value of each key is an array with 3 arguments:
- The prop's default.
- (Optional) The loaded value - a promise used to load data from an ajax server request for example.
- (Optional) The error value of the prop in case the server returns an error. It can also be a callback that gets the server error as an argument and returns the error value.
onResolve (Optional, Advanced)
An onResolve
function to be executed once the promise was resolved.
This can be used to run a setInterval
script that fetches data from the server in a set interval.
The function itself should return a function with 2 params:
* props - the component props that the component has once resolved.
* component - the component itself - good for setting its state. see Widget4
in the project example for more implementation details.
Check out the test code or indies Storybook stories for more info.
npm install react-indie --save
React-Indie uses the awesome Storybook Project to showcase the component's options.
- clone this repo on your machine
npm install
npm run storybook
- visit
https://localhost:9001/
You can also run tests by calling
npm test
The package code setup inspired from https://github.com/airbnb/rheostat The example are presented as Storybook stories https://github.com/kadirahq/react-storybook