Create components whose nested prop changes map to a global side effect
MIT License
Bot releases are hidden (Show)
fbjs
(#27)Published by gaearon about 9 years ago
Component
(#14, #16)Published by gaearon about 9 years ago
Published by gaearon about 9 years ago
render
function (#1). We drop the support for mixing in methods, because you do anything you like inside the passed component.canUseDOM
as a static property on the generated component so you can monkeypatch it in your tests.handleChange(propsList)
function, you now must provide two functions: reducePropsToState(propsList): state
and handleStateChangeOnClient(state)
. This makes the existing patterns used in React Document Title and React Helmet easier to implement, and gives you server rendering support for free.mapStateOnServer
function you may specify for advanced cases. See README for more details on the new API.BodyStyle.js
import { Component, Children, PropTypes } from 'react';
import withSideEffect from 'react-side-effect';
class BodyStyle extends Component {
render() {
return Children.only(this.props.children);
}
}
BodyStyle.propTypes = {
style: PropTypes.object.isRequired
};
function reducePropsToState(propsList) {
var style = {};
propsList.forEach(function (props) {
Object.assign(style, props.style);
});
return style;
}
function handleStateChangeOnClient(style) {
for (var key in style) {
document.style[key] = style[key];
}
}
export default withSideEffect(
reducePropsToState,
handleStateChangeOnClient
)(BodyStyle);
DocumentTitle.js
import React, { Children, Component, PropTypes } from 'react';
import withSideEffect from 'react-side-effect';
class DocumentTitle extends Component {
render: function render() {
if (this.props.children) {
return Children.only(this.props.children);
} else {
return null;
}
}
}
DocumentTitle.propTypes = {
title: PropTypes.string.isRequired
};
function reducePropsToState(propsList) {
var innermostProps = propsList[propsList.length - 1];
if (innermostProps) {
return innermostProps.title;
}
}
function handleStateChangeOnClient(title) {
document.title = title || '';
}
export default withSideEffect(
reducePropsToState,
handleStateChangeOnClient
)(DocumentTitle);
Published by gaearon about 9 years ago
invariant
and shallowEqual
from fbjs
Published by gaearon about 9 years ago
peerDependencies
. We're unlikely to be broken by React anyway, and I don't want to maintain this for every React beta release.Published by gaearon over 9 years ago
peerDependencies
Published by gaearon over 9 years ago
mixin
parameterPublished by gaearon over 9 years ago
First release!