babel-plugin-react-jsx-directives

Babel plugin that carries directives to React JSX:

• $if
• $show
• $hide
• $hidden
• $for
• $switch
• $class
• $class-*
• $style-*
• $model
• $params
• $dynamic-prop
• $dynamic-event

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

<p $if={this.state.status == 'available'}>
	I'm available
</p>
<p $elseif={this.state.status == 'busy'}>
	I'm busy now
</p>
<p $else>
	I'm certainly AFK
</p>

The $show Directive

<div $show={operationPerformed}>
	Operation has finished successfully.
</div>

The $hide Directive

<div $hide={errors.length === 0}>
	form contains errors
</div>

The $hidden Directive

<div $hidden={!show}>
	<img src="..." />
</div>

$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

<ul>
	<li $for={(book, idx) in this.state.books}
		key={idx}
	>
		{idx + 1}. {book.title}
	</li>
</ul>

The $switch Directive

<div $switch={this.state.n}>
	<p $case={1}>one</p>
	<p $case={2}>two</p>
	<p $case={3}>three</p>
	<p $default>?</p>
</div>

The $class Directive

<div className="box"
	$class={{isError: this.state.isError, isOk: this.state.isOk}}
>...</div>

The $class-* Directive

<div className="message"
	$class-fullscreen={this.state.device == 'mobile'}
>...</div>

The $style-* Directive

<p $style-color={hasError ? 'red' : '#222'}>...</p>

<p $style-fontSize="20">...</p>

You can use $style-font-size, yet the plugin will turn it into $style-fontSize, eventually.

• a unit can be specified:

<p $style-margin_px="25">...</p>

• use percent if a unit is meant to be %:

<div $style-width_percent="75">...</div>

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:

<input $model="phrase" />

• and this one to the accepted property of the state:

<input type="checkbox" $model="accepted" />
{ this.state.accepted ? 'Accepted' : 'Not accepted' }

The $params Directive

The directive allows omitting callback when using render props.

• instead of a callback:

<div user={this.state.user}>
	{(user, idx) => {
		return <p>[{ idx }] { user.name } { user.surname } ({ user.age })</p>;
	}}
</div>

• you can use the $params directive:

<div user={this.state.user} $params={(user, idx)}>
	<p>[{ idx }] { user.name } { user.surname } ({ user.age })</p>
</div>

The $dynamic-prop Directive

<div $dynamic-prop={[propToBind, valueForProp]}>
	...
</div>

It's like v-bind:[propToBind]="valueForProp" directive known from the Vue framework.

The $dynamic-event Directive

<div $dynamic-event={[eventToListen, eventsHandler]}>
	...
</div>

It's like v-on:[eventToListen]="eventsHandler" directive known from the Vue framework.