1.2.3 • Published 6 years ago
state-master v1.2.3
state-master
StateMaster improves React's methods getDerivedStateFromProps and componentDidUpdate
Installation
NPM
npm install --save state-master
Usage
import {Component} from 'react'
import {withStateMaster, registerContext, unregisterContext} from 'state-master';
const PROP_LIST = ['width', 'height', 'bgColor', 'fontSize', 'autoSize'];
// or if just one prop
const PROP_LIST = 'value';
// adding initial state is conditional
const INITIAL_STATE = {
width: 1000,
height: 500
};
class ContainerComponent extends Component {
static displayName = 'Container';
static getDerivedStateFromProps(data) {
const {
nextProps,
prevProps,
state,
isInitial,
changed,
changedProps,
isChanged,
add,
addIfChanged,
isChangedAny,
addIfChangedAny,
isChangedAll,
call,
get
} = data;
// the first initial call
if (isInitial) {
// adds param "name" with given value to result state
add('name', value);
// adds param "name" with value from nextProps to result state
add('name');
}
// changedProps is an array which contains all changed prop names
if (changedProps.indexOf('value') !== -1) {
add('value');
}
// returns true if given prop was changed somehow
if (isChanged('autoSize')) {
add('autoSize');
}
// returns true if given prop was changed to given value
if (isChanged('autoSize', true)) {
add('autoSize', true);
}
// changed is true if one of props from the PROPS_LIST was changed
if (changed) {
add('somethingChanged', true);
}
// returns true if some prop from the PROPS_LIST was changed
// the same as "changed"
if (isChangedAny()) {
add('somethingChanged', true);
}
// returns true if some prop from given arguments (prop names) was changed
if (isChangedAny('bgColor', 'fontSize')) {
const {bgColor, fontSize} = nextProps;
add('style', {backgroundColor: bgColor, fontSize});
}
// returns true if all props from the PROPS_LIST were changed
if (isChangedAll()) {
add('allChanged', true);
}
// calls "add" method if given prop was changed
addIfChanged('name', value);
addIfChanged('name');
// calls "add" method if some prop from the PROPS_LIST was changed
addIfChangedAny('name', value);
addIfChangedAny('name');
// returns true if all prop from given arguments (prop names) were changed
if (isChangedAll('width', 'height')) {
const {width, height} = nextProps;
add('size', width + 'x' + height);
// calls function with timeout
// the same as setTimeout(() => this.changeSomething(), 0)
// use to do some action after component updating
call(() => {
this.initNewSizes(width, height);
});
}
// returns result state or null
// it's something about debugging, put to the end
console.log(get());
// or you can just return state changes as usually
return {
size: nextProps.width + 'x' + nextProps.height
}
}
constructor(props) {
super(props);
// use "registerContext" if you need to have this context in getDerivedStateFromProps
registerContext(this);
}
componentDidUpdate(data) {
const {
prevProps,
prevState,
snapshot,
changedProps,
changed,
isChanged,
isChangedAny,
isChangedAll
} = data;
if (isChanged('value')) {
const {value} = this.props;
this.doSomeAction(value);
}
}
componentWillUnmount() {
// this should be done if "registerContext" was called
unregisterContext(this);
}
render() {
const {style, size} = this.state;
return (
<div className="container" style={style}>
Size is {size}
</div>
)
}
}
export const Container = withStateMaster(ContainerComponent, PROP_LIST, INITIAL_STATE);
If you have some parental component that also has getDerivedStateFromProps add one more argument
class ContainerComponent extends ParentalComponent {
// ...
}
export const Container = withStateMaster(ContainerComponent, PROP_LIST, null, ParentalComponent);
So the state from ParentalComponent will be added to Container's state and so on
1.2.3
6 years ago
1.2.2
6 years ago
1.2.1
6 years ago
1.2.0
6 years ago
1.1.9
6 years ago
1.1.8
6 years ago
1.1.7
6 years ago
1.1.6
6 years ago
1.1.5
6 years ago
1.1.4
6 years ago
1.1.3
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.9
6 years ago
1.0.8
6 years ago
1.0.7
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago