Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/clumsyme/babel-plugin-react-auto-props
auto add props to your React Component
https://github.com/clumsyme/babel-plugin-react-auto-props
auto babel babel-plugin props react
Last synced: 2 months ago
JSON representation
auto add props to your React Component
- Host: GitHub
- URL: https://github.com/clumsyme/babel-plugin-react-auto-props
- Owner: clumsyme
- License: mit
- Created: 2019-07-19T07:29:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T08:48:36.000Z (almost 2 years ago)
- Last Synced: 2024-10-22T01:20:16.498Z (2 months ago)
- Topics: auto, babel, babel-plugin, props, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/babel-plugin-react-auto-props
- Size: 680 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# babel-plugin-react-auto-props
English | [中文](/README.zh.md)
## What's this?
This is a babel plugin which auto adds props to your React Component based on your component type.
```jsx
// what we write
Click me
Hello world
// ⚙⚙⚙⚙⚙⚙⚙⚙⚙⚙⚙
// what we get after compile
Click me
Hello world
```
## How can I use it?
Firstly, install it from npm:
```
npm install -D babel-plugin-react-auto-props
```
Secondly, use it in you babel config:
```js
// babel.config.js
const plugins = [
// ...your other babel plugins
[
'babel-plugin-react-auto-props',
{
Button: {
className: 'my-button',
},
p: {
style: {
color: 'grey',
fontSize: 15,
},
},
},
],
]
```
That's it.
## What's the result of the plugin
Given the following React element
```jsx
let element = (
Click me
Hello world
)
```
We will get:
```js
var element = _react.default.createElement(
'div',
null,
_react.default.createElement(
Button,
_defineProperty(
{
className: 'my-button',
},
'className',
'my-button',
),
'Click me',
),
_react.default.createElement(
'p',
_defineProperty(
{
style: {
color: 'grey',
fontSize: 15,
},
},
'style',
{
color: 'grey',
fontSize: 15,
},
),
'Hello world',
),
)
```
## Should I use it?
This is an experimental project, and auto add props to React Component is anti-pattern. You should consider to use [Specialization](https://reactjs.org/docs/composition-vs-inheritance.html#specialization) in production. However, it's all up to you.
## License
MIT
✨🍰✨