babel-plugin-stateful-functional-react-components
v0.0.5
Published
Stateful functional React components without runtime overhead
Downloads
20
Maintainers
Readme
babel-plugin-stateful-functional-react-components
✨ Stateful functional React components without runtime overhead (inspired by ClojureScript) ✨
Compiles stateful functional React components syntax into ES2015 classes
WARNING: This plugin is experimental. If you are interested in taking this further, please open an issue or submit a PR with improvements.
Why?
Because functional components are concise and it's annoying to write ES2015 classes when all you need is local state.
Advantages
- No runtime overhead
- No dependencies that adds additional KB's to your bundle
Example
Input
// props context state init state
const Counter = ({ text }, { theme }, { val } = { val: 0 }, setState) => (
<div className={theme}>
<h1>{text}</h1>
<div>
<button onClick={() => setState({ val: val - 1 })}>-</button>
<span>{val}</span>
<button onClick={() => setState({ val: val + 1 })}>+</button>
</div>
</div>
);
Output
class Counter extends React.Component {
constructor() {
super();
this.state = { val: 0 };
}
render() {
const { text } = this.props;
const { theme } = this.context;
const { val } = this.state;
return (
<div className={theme}>
<h1>{text}</h1>
<div>
<button onClick={() => this.setState({ val: val - 1 })}>-</button>
<span>{val}</span>
<button onClick={() => this.setState({ val: val + 1 })}>+</button>
</div>
</div>
);
}
}
API
(props [,context], state = initialState, setState)
props
is component’s props i.e.this.props
context
is optional parameter which corresponds to React’s contextstate
is component’s state,initialState
is requiredsetState
maps tothis.setState
Requirements
- state parameter must be assigned default value (initial state)
- The last parameter must be named
setState
Installation
npm i babel-plugin-stateful-functional-react-components
Usage
Via .babelrc (Recommended)
.babelrc
{
"plugins": ["stateful-functional-react-components"]
}
Via CLI
babel --plugins stateful-functional-react-components script.js
Via Node API
require("babel-core").transform("code", {
plugins: ["stateful-functional-react-components"]
});
License
MIT