{"id":21766586,"url":"https://github.com/damianc/babel-plugin-react-jsx-directives","last_synced_at":"2025-04-13T15:12:20.297Z","repository":{"id":51552659,"uuid":"251141215","full_name":"damianc/babel-plugin-react-jsx-directives","owner":"damianc","description":"Babel plugin that carries to React JSX directives like IF or FOR.","archived":false,"fork":false,"pushed_at":"2021-05-11T08:38:45.000Z","size":88,"stargazers_count":5,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-13T15:12:15.747Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/damianc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-29T21:45:56.000Z","updated_at":"2023-09-08T16:17:31.000Z","dependencies_parsed_at":"2022-08-22T07:21:24.270Z","dependency_job_id":null,"html_url":"https://github.com/damianc/babel-plugin-react-jsx-directives","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damianc%2Fbabel-plugin-react-jsx-directives","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damianc%2Fbabel-plugin-react-jsx-directives/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damianc%2Fbabel-plugin-react-jsx-directives/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/damianc%2Fbabel-plugin-react-jsx-directives/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/damianc","download_url":"https://codeload.github.com/damianc/babel-plugin-react-jsx-directives/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248732488,"owners_count":21152852,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-26T13:18:10.927Z","updated_at":"2025-04-13T15:12:20.278Z","avatar_url":"https://github.com/damianc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-react-jsx-directives\n\n![npm](https://img.shields.io/npm/v/babel-plugin-react-jsx-directives)\n![GitHub repo size](https://img.shields.io/github/repo-size/damianc/babel-plugin-react-jsx-directives)\n![high usability](https://img.shields.io/badge/usability-%E2%98%85%20high-fa0)\n\nBabel plugin that carries directives to React JSX:\n* [`$if`](#the-if-directive)\n* [`$show`](#the-show-directive)\n* [`$hide`](#the-hide-directive)\n* [`$hidden`](#the-hidden-directive)\n* [`$for`](#the-for-directive)\n* [`$switch`](#the-switch-directive)\n* [`$class`](#the-class-directive)\n* [`$class-*`](#the-class--directive)\n* [`$style-*`](#the-style--directive)\n* [`$model`](#the-model-directive)\n* [`$params`](#the-params-directive)\n* [`$dynamic-prop`](#the-dynamic-prop-directive)\n* [`$dynamic-event`](#the-dynamic-event-directive)\n\n## Installation\n\n```\nnpm i babel-plugin-react-jsx-directives\n```\n\n### Options\n\n| Option | Type | Description | Default value |\n|--------|------|-------------|---------------|\n| `prefix` | string | A prefix directives are preceded with; must consist of one or more lowercase characters, plus can contain `$` char(s). | `$` |\n| `prefixSeparation` | boolean | Whether a prefix and directive name should be separated with the `-` character. | `false` |\n\n#### Change of the Prefix\n\nReplace the default `$` prefix with `x-`, so e.g., `$if` becomes `x-if`:\n\n```\nplugins: [\n\t['babel-plugin-react-jsx-directives', {\n\t\tprefix: 'x',\n\t\tprefixSeparation: true\n\t}]\n]\n```\n\n## The `$if` Directive\n\n```\n\u003cp $if={this.state.status == 'available'}\u003e\n\tI'm available\n\u003c/p\u003e\n\u003cp $elseif={this.state.status == 'busy'}\u003e\n\tI'm busy now\n\u003c/p\u003e\n\u003cp $else\u003e\n\tI'm certainly AFK\n\u003c/p\u003e\n```\n\n## The `$show` Directive\n\n```\n\u003cdiv $show={operationPerformed}\u003e\n\tOperation has finished successfully.\n\u003c/div\u003e\n```\n\n## The `$hide` Directive\n\n```\n\u003cdiv $hide={errors.length === 0}\u003e\n\tform contains errors\n\u003c/div\u003e\n```\n\n## The `$hidden` Directive\n\n```\n\u003cdiv $hidden={!show}\u003e\n\t\u003cimg src=\"...\" /\u003e\n\u003c/div\u003e\n```\n\n### `$hide` vs. `$hidden`\n\n* `$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)\n* `$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)\n\n## The `$for` Directive\n\n```\n\u003cul\u003e\n\t\u003cli $for={(book, idx) in this.state.books}\n\t\tkey={idx}\n\t\u003e\n\t\t{idx + 1}. {book.title}\n\t\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n## The `$switch` Directive\n\n```\n\u003cdiv $switch={this.state.n}\u003e\n\t\u003cp $case={1}\u003eone\u003c/p\u003e\n\t\u003cp $case={2}\u003etwo\u003c/p\u003e\n\t\u003cp $case={3}\u003ethree\u003c/p\u003e\n\t\u003cp $default\u003e?\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## The `$class` Directive\n\n```\n\u003cdiv className=\"box\"\n\t$class={{isError: this.state.isError, isOk: this.state.isOk}}\n\u003e...\u003c/div\u003e\n```\n\n## The `$class-*` Directive\n\n```\n\u003cdiv className=\"message\"\n\t$class-fullscreen={this.state.device == 'mobile'}\n\u003e...\u003c/div\u003e\n```\n\n## The `$style-*` Directive\n\n```\n\u003cp $style-color={hasError ? 'red' : '#222'}\u003e...\u003c/p\u003e\n```\n\n```\n\u003cp $style-fontSize=\"20\"\u003e...\u003c/p\u003e\n```\n\n\u003e You can use `$style-font-size`, yet the plugin will turn it into `$style-fontSize`, eventually.\n\n* a unit can be specified:\n\n```\n\u003cp $style-margin_px=\"25\"\u003e...\u003c/p\u003e\n```\n\n* use `percent` if a unit is meant to be `%`:\n\n```\n\u003cdiv $style-width_percent=\"75\"\u003e...\u003c/div\u003e\n```\n\n\u003e A unit can be specified if a value of the directive is just a string rather than expression.\n\n## The `$model` Directive\n\n* the input below is connected to the `phrase` property of a component state:\n\n```\n\u003cinput $model=\"phrase\" /\u003e\n```\n\n* and this one to the `accepted` property of the state:\n\n```\n\u003cinput type=\"checkbox\" $model=\"accepted\" /\u003e\n{ this.state.accepted ? 'Accepted' : 'Not accepted' }\n```\n\n## The `$params` Directive\n\nThe directive allows omitting callback when using render props.\n\n* instead of a callback:\n\n```\n\u003cdiv user={this.state.user}\u003e\n\t{(user, idx) =\u003e {\n\t\treturn \u003cp\u003e[{ idx }] { user.name } { user.surname } ({ user.age })\u003c/p\u003e;\n\t}}\n\u003c/div\u003e\n```\n\n* you can use the `$params` directive:\n\n```\n\u003cdiv user={this.state.user} $params={(user, idx)}\u003e\n\t\u003cp\u003e[{ idx }] { user.name } { user.surname } ({ user.age })\u003c/p\u003e\n\u003c/div\u003e\n```\n\n## The `$dynamic-prop` Directive\n\n```\n\u003cdiv $dynamic-prop={[propToBind, valueForProp]}\u003e\n\t...\n\u003c/div\u003e\n```\n\n\u003e It's like `v-bind:[propToBind]=\"valueForProp\"` directive known from the Vue framework.\n\n## The `$dynamic-event` Directive\n\n```\n\u003cdiv $dynamic-event={[eventToListen, eventsHandler]}\u003e\n\t...\n\u003c/div\u003e\n```\n\n\u003e It's like `v-on:[eventToListen]=\"eventsHandler\"` directive known from the Vue framework.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamianc%2Fbabel-plugin-react-jsx-directives","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdamianc%2Fbabel-plugin-react-jsx-directives","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdamianc%2Fbabel-plugin-react-jsx-directives/lists"}