diff --git a/docs/connectToStores.md b/docs/connectToStores.md new file mode 100644 index 0000000..5c4f721 --- /dev/null +++ b/docs/connectToStores.md @@ -0,0 +1,54 @@ +# Connecting components to Alt stores + +`connectToStores` wraps a React component and control its props with data coming from Alt stores. + +Expects the Component to have two static methods: +- `getStores()`: Should return an array of stores. +- `getPropsFromStores(props)`: Should return the props from the stores. + +## Usage Examples + +### ES6 Class Higher Order Component +```js +import React from 'react'; +import myStore from './stores/myStore'; +import connectToStores from 'alt-utils/lib/connectToStores'; + +class MyComponent extends React.Component { + static getStores(props) { + return [myStore]; + } + + static getPropsFromStores(props) { + return myStore.getState(); + } + + render() { + // Use this.props like normal... + } +} + +export default connectToStores(MyComponent); +``` + +### ES7 Decorator +```js +import React from 'react'; +import myStore from './stores/myStore'; +import connectToStores from 'alt-utils/lib/connectToStores'; + +@connectToStores +class MyComponent extends React.Component { + static getStores(props) { + return [myStore]; + } + + static getPropsFromStores(props) { + return myStore.getState(); + } + + render() { + // Use this.props like normal... + } +} +```