Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/damianc/babel-plugin-react-jsx-directives
Babel plugin that carries to React JSX directives like IF or FOR.
https://github.com/damianc/babel-plugin-react-jsx-directives
Last synced: about 1 month ago
JSON representation
Babel plugin that carries to React JSX directives like IF or FOR.
- Host: GitHub
- URL: https://github.com/damianc/babel-plugin-react-jsx-directives
- Owner: damianc
- Created: 2020-03-29T21:45:56.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-11T08:38:45.000Z (over 3 years ago)
- Last Synced: 2024-11-06T03:51:25.482Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 85.9 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# babel-plugin-react-jsx-directives
Babel plugin that carries directives to React JSX:
* [`$if`](#the-if-directive)
* [`$show`](#the-show-directive)
* [`$hide`](#the-hide-directive)
* [`$hidden`](#the-hidden-directive)
* [`$for`](#the-for-directive)
* [`$switch`](#the-switch-directive)
* [`$class`](#the-class-directive)
* [`$class-*`](#the-class--directive)
* [`$style-*`](#the-style--directive)
* [`$model`](#the-model-directive)
* [`$params`](#the-params-directive)
* [`$dynamic-prop`](#the-dynamic-prop-directive)
* [`$dynamic-event`](#the-dynamic-event-directive)
## Installation
```
npm i babel-plugin-react-jsx-directives
```
### Options
| Option | Type | Description | Default value |
|--------|------|-------------|---------------|
| `prefix` | string | A prefix directives are preceded with; must consist of one or more lowercase characters, plus can contain `$` char(s). | `$` |
| `prefixSeparation` | boolean | Whether a prefix and directive name should be separated with the `-` character. | `false` |
#### Change of the Prefix
Replace the default `$` prefix with `x-`, so e.g., `$if` becomes `x-if`:
```
plugins: [
['babel-plugin-react-jsx-directives', {
prefix: 'x',
prefixSeparation: true
}]
]
```
## The `$if` Directive
```
I'm available
I'm busy now
I'm certainly AFK
```
## The `$show` Directive
```
Operation has finished successfully.
```
## The `$hide` Directive
```
form contains errors
```
## The `$hidden` Directive
```
```
### `$hide` vs. `$hidden`
* `$hide` - an element hidden by the `$hide` directive is not visible and takes no space on the page (it is done by CSS `display: none` setting)
* `$hidden` - an element hidden by the `$hidden` directive is not visible on the page but does take space of the page as if it were displayed (it is done by CSS `visibility: hidden` setting)
## The `$for` Directive
```
-
{idx + 1}. {book.title}
```
## The `$switch` Directive
```
one
two
three
?
```
## The `$class` Directive
```
```
## The `$class-*` Directive
```
```
## The `$style-*` Directive
```
...
```
```
...
```
> You can use `$style-font-size`, yet the plugin will turn it into `$style-fontSize`, eventually.
* a unit can be specified:
```
...
```
* use `percent` if a unit is meant to be `%`:
```
```
> A unit can be specified if a value of the directive is just a string rather than expression.
## The `$model` Directive
* the input below is connected to the `phrase` property of a component state:
```
```
* and this one to the `accepted` property of the state:
```
{ this.state.accepted ? 'Accepted' : 'Not accepted' }
```
## The `$params` Directive
The directive allows omitting callback when using render props.
* instead of a callback:
```
{(user, idx) => {
return
[{ idx }] { user.name } { user.surname } ({ user.age })
;}}
```
* you can use the `$params` directive:
```
[{ idx }] { user.name } { user.surname } ({ user.age })
```
## The `$dynamic-prop` Directive
```
...
```
> It's like `v-bind:[propToBind]="valueForProp"` directive known from the Vue framework.
## The `$dynamic-event` Directive
```
...
```
> It's like `v-on:[eventToListen]="eventsHandler"` directive known from the Vue framework.