https://github.com/patrickmarabeas/react-stateful-hoc
Higher Order Component for demoing stateless functional React components
https://github.com/patrickmarabeas/react-stateful-hoc
reactjs reactjs-components reactjs-demo
Last synced: about 2 months ago
JSON representation
Higher Order Component for demoing stateless functional React components
- Host: GitHub
- URL: https://github.com/patrickmarabeas/react-stateful-hoc
- Owner: patrickmarabeas
- License: mit
- Created: 2017-05-23T23:52:01.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-14T07:21:39.000Z (almost 9 years ago)
- Last Synced: 2025-07-01T11:08:36.004Z (11 months ago)
- Topics: reactjs, reactjs-components, reactjs-demo
- Language: JavaScript
- Size: 7.81 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-stateful-hoc
Higher Order Component for demoing stateless functional React components
## Demo Sandbox
[https://codesandbox.io/s/Mj5MMXG4R](https://codesandbox.io/s/Mj5MMXG4R)
## Usage
> npm i -D react-stateful-hoc
```
/** App */
import React from 'react';
import { render } from 'react-dom';
import StatefulHOC from 'react-stateful-hoc';
import { Clicker, onClickHandler, onClickHandlerAlternate } from 'Components/Clicker';
const ClickerMock = StatefulHOC(Clicker);
const ClickerDemo = ClickerMock({
onClick(prop) {
this.setState({ value: onClickHandler(this.value, prop) });
},
});
// *** or ***
const ClickerDemo2 = ClickerMock({
value: 0,
onClick(prop) {
this.setState((state, props) => ({
value: onClickHandler(state.value, prop),
}));
},
});
// *** or ***
const ClickerDemo3 = ClickerMock({
onClick(value) {
this.setState(onClickHandlerAlternate(this, value));
},
});
const App = () =>
;
render(, document.getElementById('root'));
```
```
/** components/Clicker */
import React from 'react';
import propTypes from 'prop-types';
const Clicker = (props) => {
const { value } = props; // event handlers will need to reference props directly to maintain scope
return
props.onClick(1)}>CLICK ME: {value};
};
Clicker.propTypes = {
value: propTypes.number.isRequired,
onClick: propTypes.func.isRequired
};
Clicker.defaultProps = {
value: 0
};
function onClickHandler(state, payload) {
return state += payload;
}
// *** or ***
function onClickHandlerAlternate(state, props) {
return {
value: state.value + props
}
}
export { Clicker, onClickHandler, onClickHandlerAlternate };
```