https://github.com/marlo22/react-simplifier-babel
A Babel plugin that makes writing React components concise and fast.
https://github.com/marlo22/react-simplifier-babel
Last synced: 3 months ago
JSON representation
A Babel plugin that makes writing React components concise and fast.
- Host: GitHub
- URL: https://github.com/marlo22/react-simplifier-babel
- Owner: marlo22
- License: mit
- Created: 2022-11-12T08:56:32.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-12T10:53:46.000Z (over 3 years ago)
- Last Synced: 2025-05-29T22:16:26.786Z (about 1 year ago)
- Language: JavaScript
- Size: 114 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @react-simplifier/babel-plugin
A Babel plugin that makes writing React components concise and fast.
:warning: **WARNING: This project is still in early develop stage! DO NOT use it on production!** :warning:
## How it works?
Let's have a look on an example. This is a simple React component:
```jsx
const Counter = () => {
const [counter, setCounter] = useState(0);
const increment = () => {
setCounter((prevValue) => prevValue + 1);
};
return (
{counter}
Increment
)
};
```
And here, the same component but with React Simplifier:
```jsx
const Counter = () => {
const $counter = 0;
const increment = () => { counter++; }
return (
{counter}
Increment
)
};
```
As you can see, working with this plugin is much easier, because you don't have to import `useState` and use the `useState` getter/setter. You can deal with the component's state as with normal JS variables. Under the hood the React `useState` hook is still used so the compiled code will look like this:
```jsx
import { useState } from 'react';
const Counter = () => {
const [$counter, ____set$counter] = useState(0);
const increment = () => ____set$counter((prevValue) => prevValue + 1);
return (
{counter}
Increment
)
};
```
But you don't need to care, because the plugin does it for you. :wink:
## Installation
The plugin is available as an npm package.
```
npm i @react-simplifier/babel-plugin
```
After installation you have to add the plugin to your Babel config file.
```js
module.exports = {
...
plugins: [
'@react-simplifier/babel-plugin'
]
}
```
## Configuration
| Property | Required | Type | Default value | Description |
| -------- | -------- | ---- | ------------- | ----------- |
| `stateVariablePattern` | :x: | `RegExp` | `/^\$\w+/` | Set pattern to recognize React state variables. The default pattern starts with the dollar sign - `$foo` |
## FAQ
### Does the plugin work with class components?
Not yet, we plan to add support for class components in the future - this is one of our priorities.