/react-indie

An independent react Component that holds all its logic inside.
  1. JavaScript 100.0%
JavaScript

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Open in Desktop Download ZIP
Find file
Switch branches/tags
Nothing to show
Latest commit d81d52c Apr 30, 2016 @tomatau tomatau committed with fix(docs): readme typo (#14) 
fixed by @tomatau
Permalink
Failed to load latest commit information.
.storybook fix(examples): refactor & add code examples (#12) Apr 18, 2016
src feat(api): add get util to handle promises nested data (#13) Apr 19, 2016
stories feat(api): add get util to handle promises nested data (#13) Apr 19, 2016
test feat(api): add get util to handle promises nested data (#13) Apr 19, 2016
.babelrc
.eslintrc initial commit Apr 12, 2016
.gitignore fix(ci): CI setup Apr 13, 2016
.npmignore fix(ci): CI setup Apr 13, 2016
.travis.yml fix(ci): CI setup Apr 13, 2016
README.md fix(docs): readme typo (#14) May 1, 2016
logo.png fix(examples): refactor & add code examples (#12) Apr 18, 2016
package.json fix(examples): refactor & add code examples (#12) Apr 18, 2016
react-indie-demo.gif doc(readme): chanhe readme gif (#5) Apr 14, 2016

README.md

npm Build Status semantic-release

react-indie

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.

API

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:

  1. The prop's default.
  2. (Optional) The loaded value - a promise used to load data from an ajax server request for example.
  3. (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.

Install

npm install react-indie --save

Live Playground

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 http://localhost:9001/

You can also run tests by calling npm test

Acknowledgements

The package code setup inspired from https://github.com/airbnb/rheostat The example are presented as Storybook stories https://github.com/kadirahq/react-storybook