side-effect   

Heavily inspired by react-side-effect.

Features

- Light-weight: 500 bytes gzipped
- Simple: Just a component
- Works just as well with isomorphic apps

Install

``bash
$ npm install --save side-effect
`

Example

It gathers current props across the whole tree before passing them to side effect. For example, this allows you to create component like this:

`vue









`

Create a side-effect component named BodyStyle for mutating body style from different level of nesting with innermost winning:

`js
import withSideEffect from 'side-effect'

const BodyStyle = {
name: 'body-style',
render(h) {
if (!this.$slots.default) return h()
return this.$slots.default[0]
}
}

function reduceInstancesToState(vms) {
const style = {}
for (const vm of vms) {
Object.assign(style, vm.setStyle)
}
return style
}


function handleStateChangeOnClient(style) {
for (const key in style) {
document.body.style[key] = style[key]
}
}

export default withSideEffect(
reduceInstancesToState,
handleStateChangeOnClient
)(BodyStyle)
`

Now, it's ready to go: https://side-effect.surge.sh

Server-side Usage

The API is exactly the same as react-side-effect, call rewind() after rendering.

`js
withSideEffect(
reduceInstancesToState,
handleStateChangeOnClient,
mapStateOnServer
)(VueComponent)
`

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature`
5. Submit a pull request :D

License

MIT © EGOIST