Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jide/redux-region


https://github.com/jide/redux-region

Last synced: about 1 month ago
JSON representation

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

````