roman01la / Babel Plugin Stateful Functional React Components
Licence: mit
Stateful functional React components without runtime overhead
Stars: ✭ 86
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Babel Plugin Stateful Functional React Components
React Lottie
Render After Effects animations on React based on lottie-web
Stars: ✭ 1,132 (+1216.28%)
Mutual labels: react-component
Svg Loaders React
React adaptation of the SVG Loaders library by Sam Herbert
Stars: ✭ 75 (-12.79%)
Mutual labels: react-component
React Router Ga
Google Analytics component for React Router
Stars: ✭ 66 (-23.26%)
Mutual labels: react-component
React Payment Card Component
💳 A modern credit card component for React
Stars: ✭ 74 (-13.95%)
Mutual labels: react-component
Reactjs Popup
React Popup Component - Modals,Tooltips and Menus — All in one
Stars: ✭ 1,211 (+1308.14%)
Mutual labels: react-component
React Easy Swipe
Easy handler for common swipe operations
Stars: ✭ 85 (-1.16%)
Mutual labels: react-component
Uskin
A front-end framework aims at developing web projects based on CSS3 and provides common components.
Stars: ✭ 74 (-13.95%)
Mutual labels: react-component
React Marquee Slider
The marquee slider of your deepest dreams. Only for React.js ⛺
Stars: ✭ 73 (-15.12%)
Mutual labels: react-component
Babel Plugin Captains Log
Babel plugin that injects helpful details into console statements
Stars: ✭ 80 (-6.98%)
Mutual labels: babel-plugin
Astexplorer.app
https://astexplorer.net with ES Modules support and Hot Reloading
Stars: ✭ 65 (-24.42%)
Mutual labels: babel-plugin
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Stars: ✭ 1,235 (+1336.05%)
Mutual labels: babel-plugin
React Hover
React hover --- make hover easy http://cht8687.github.io/react-hover/example/
Stars: ✭ 64 (-25.58%)
Mutual labels: react-component
Refluent
A chainable & composable alternative React component API.
Stars: ✭ 75 (-12.79%)
Mutual labels: react-component
Ui Predicate
Finally a Predicate/Rule Editor UI component for the Web 🚀
Stars: ✭ 86 (+0%)
Mutual labels: react-component
Modify Babel Preset
💫 Create a modified babel preset based on an an existing preset.
Stars: ✭ 85 (-1.16%)
Mutual labels: babel-plugin
Babel Plugin Optimize Clsx
Babel plugin to optimize the use of clsx, classnames, and other libraries with a compatible API
Stars: ✭ 80 (-6.98%)
Mutual labels: babel-plugin
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.
Table of Contents
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 context -
state
is component’s state,initialState
is required -
setState
maps tothis.setState
Important notes
- state parameter must be assigned default value (initial state)
- The last parameter must be named
setState
- Even though this syntax makes components look functional, don't forget that they are also stateful, which means that hot-reloading won't work for them.
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].