https://github.com/fluse/alt-store-connect
https://github.com/fluse/alt-store-connect
Last synced: 5 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/fluse/alt-store-connect
- Owner: fluse
- Created: 2017-05-10T07:30:22.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-07T04:49:37.000Z (over 3 years ago)
- Last Synced: 2025-01-06T00:44:07.834Z (over 1 year ago)
- Language: JavaScript
- Size: 216 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Connecting components to Alt stores
## Install
```
npm install alt-store-connect --save
```
`connectToStores` wraps a React component and control its props with data coming from Alt stores.
This module supports React 16
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-connect-store';
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, { Component } from 'react'
import myStore from './stores/myStore'
import connectToStores from 'alt-connect-store'
@connectToStores
export default class MyComponent extends Component {
static getStores(props) {
return [myStore]
}
static getPropsFromStores(props) {
return myStore.getState()
}
render() {
// Use this.props like normal...
}
}
```