Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jide/redux-region
https://github.com/jide/redux-region
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/jide/redux-region
- Owner: jide
- Created: 2015-07-29T18:31:43.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-09-04T15:17:10.000Z (over 9 years ago)
- Last Synced: 2024-10-17T22:51:28.240Z (about 2 months ago)
- Language: JavaScript
- Size: 176 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
### redux + React.addons.update + Region
```npm install && npm start```
A Region component :
````js
import makeRegion from './makeRegion';
import Badge from './Badge';// Register the components you want to be able to mount in Regions here
const Region = makeRegion({
Badge, ...
});````
One action :
````js
redux.dispatch(actions.set(payload))
````Dispatches and result :
````js
{
aside: {
$set: [
{
component: 'Badge',
props: {
key: 'initial',
title: 'Hello world',
country: 'France'
}
}
]
}
}
````
Then :
````js
{
aside: {
$push: [
{
component: 'Badge',
props: {
key: 'another',
title: 'Some other item, with a key',
country: 'Japan',
className: 'fade-in'
}
}
]
}
}
````
Because there is a key, if we dispatch it again it will move at the end and be updated.Then :
````js
{
aside: {
$push: [
{
component: 'Badge',
props: {
title: 'Some other item, with no key',
country: 'Any',
className: 'fade-in'
}
}
]
}
}
````
Since there is no key, if we dispatch it again, another item will be pushed.Then :
````js
{
aside: {
$splice: [
[-1, 1]
]
}
}
````
Finally :
````js
{
aside: {
$set: []
}
}````
Nested children :
````js
{
aside: {
$set: [
{
component: 'Badge',
props: {
key: 'initial',
title: 'Hello world',
country: 'France',
children: [
{
type: 'small',
props: {
children: 'I am a child'
}
}
]
}
}
]
}
}
I am a child
````
Maybe we want more control :
````js
{
wrapper: {
$set: {
className: 'toggled',
style: {
color: 'red'
}
}
}
}{ state => (
hello world
) }````
Renders are too slow ! Manual rendering :
````js
{
wrapper: {
$set: {
className: 'toggled'
}
}
}React.findDOMNode(self).classList.add(state.className) }>
hello````
We want animations ! You can use CSS classes, or the builtin animation to animate enter / leave / change position
````js````