Neater If and For for React JSX

Overview

JSX Control Statements

Build Status Coverage Status npm version

JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts - e.g. <If condition={condition()}>Hello World!</If> becomes condition() ? 'Hello World!' : null.

Developers coming to React from using JavaScript templating libraries like Handlebars are often surprised that there's no built-in looping or conditional syntax. This is by design - JSX by is not a templating library, it's declarative syntactic sugar over functional JavaScript expressions. JSX Control Statements follows the same principle - it provides a component-like syntax that keeps your render functions neat and readable, but desugars into clean, readable JavaScript.

The only dependency JSX-Control-Statements relies upon is Babel. It is compatible with React and React Native.

☠️ Beware: This is a Babel plugin. It changes your code to other code - this means that some tooling that looks at your code (e.g. static analysis, typescript) is likely to not work. This plugin dates back to when JSX was daring and Javascript was more like playdough than meccano - if you want to stay on the well-trodden path stick with writing && and map.

Table of Contents

A Note on Transformation and Alternative Solutions

It appears to be pretty easy to implement conditionals as React component, which is underlined by the amount of libraries which have taken this approach. However, all of them suffer from the same major caveat: A React component will always evaluate all of its properties including the component body. Hence the following example will fail for those libraries:

<IfComponent condition={item}>{item.title}</IfComponent>

The error will be "Cannot read property 'title' of undefined", because React will evaluate the body of the custom component and pass it as "children" property to it. The only workaround is to force React into lazy evaluation by wrapping the statement in a function.

This is the reason why conditionals must be implemented in pure JS. JSX-Control-Statements only adds the syntactic sugar to write conditionals as component, while it transforms this "component" to a pure JS expression.

See Alternative Solutions for a more detailed comparison and pure JS solutions.

Installation

As a prerequisite you need to have Babel installed and configured in your project.

Install via npm:

  npm install --save-dev babel-plugin-jsx-control-statements

Then you only need to specify JSX-Control-Statements as Babel plugin, which you would typically do in your .babelrc.

{
  ...
  "plugins": ["jsx-control-statements"]
}

If you use the transform-react-inline-elements plugin, place it after jsx-control-statements:

{
  ...
  "plugins": ["jsx-control-statements", "transform-react-inline-elements"]
}

Babel can be used and configured in many different ways, so use this guide to pick a configuration which fits your setup.

Syntax

If Tag

Used to express the most simple conditional logic.

// simple
<If condition={ true }>
  <span>IfBlock</span>
</If>

// using multiple child elements and / or expressions
<If condition={ true }>
  one
  { "two" }
  <span>three</span>
  <span>four</span>
</If>

<If>

The body of the if statement only gets evaluated if condition is true.

Prop Name Prop Type Required
condition boolean

<Else /> (deprecated)

The else element has no properties and demarcates the else branch.

This element is deprecated, since it's bad JSX/XML semantics and breaks auto-formatting. Please use <Choose> instead.

Transformation

If statements transform to the ternary operator:

// before transformation
<If condition={test}>
  <span>Truth</span>
</If>;

// after transformation
{
  test ? <span>Truth</span> : null;
}

Choose Tag

This is an alternative syntax for more complex conditional statements. The syntax itself is XMLish and conforms by and large to JSTL or XSLT (the attribute is called condition instead of test):

<Choose>
  <When condition={ test1 }>
    <span>IfBlock</span>
  </When>
  <When condition={ test2 }>
    <span>ElseIfBlock</span>
    <span>Another ElseIfBlock</span>
    <span>...</span>
  </When>
  <Otherwise>
    <span>ElseBlock</span>
  </Otherwise>
</Choose>

// default block is optional; minimal example:
<Choose>
  <When condition={true}>
    <span>IfBlock</span>
  </When>
</Choose>

<Choose>

Acts as a simple container and only allows for <When> and <Otherwise> as children. Each <Choose> statement requires at least one <When> block but may contain as many as desired. The <Otherwise> block is optional.

<When>

Analog to <If>.

Prop Name Prop Type Required
condition boolean

<Otherwise>

<Otherwise> has no attributes and demarcates the else branch of the conditional.

Transformation

This syntax desugars into a (sequence of) ternary operator(s).

// Before transformation
<Choose>
  <When condition={test1}>
    <span>IfBlock1</span>
  </When>
  <When condition={test2}>
    <span>IfBlock2</span>
  </When>
  <Otherwise>
    <span>ElseBlock</span>
  </Otherwise>
</Choose>;

// After transformation
{
  test1 ? (
    <span>IfBlock1</span>
  ) : test2 ? (
    <span>IfBlock2</span>
  ) : (
    <span>ElseBlock</span>
  );
}

For Tag

Define <For> like so:

  // you must provide the key attribute yourself
  <For each="item" of={ this.props.items }>
    <span key={ item.id }>{ item.title }</span>
  </For>

  // using the index as key attribute is not stable if the array changes
  <For each="item" index="idx" of={ [1,2,3] }>
    <span key={ idx }>{ item }</span>
    <span key={ idx + '_2' }>Static Text</span>
  </For>
Prop Name Prop Type Required description
of array or collection(Immutable) the array to iterate over. This can also be a collection (Immutable.js) or anything on which a function with the name map can be called
each string a reference to the current item of the array which can be used within the body as variable
index string a reference to the index of the current item which can be used within the body as variable

Note that a <For> cannot be at the root of a render() function in a React component, because then you'd potentially have multiple components without a parent to group them which isn't allowed. As with <If>, the same rules as using Array.map() apply - each element inside the loop should have a key attribute that uniquely identifies it.

For Tag - Alternative Syntax

For those using Typescript, the previous syntax introduces several issues with undefined variables. To deal with this issue, we introduce a following syntax, inspired by tsx-control-statements.

// before transformation
<For
  of={items}
  body={(item, index) => (
    <span key={item.id}>
      {index}. {item.title}
    </span>
  )}
/>;

// after transformation
{
  items.map(function(item, index) {
    <span key={item.id}>
      {index}. {item.title}
    </span>;
  });
}
Prop Name Prop Type Required description
of array or collection(Immutable) the array to iterate over. This can also be a collection (Immutable.js) or anything on which a function with the name map can be called
body map expression expression of the map statement

With Tag

Used to assign values to local variables:

// simple
<With foo={ 47 } bar={ 'test' }>
  <span>{ foo }</span>
  <span>{ bar }</span>
</With>

// nested
<With foo={ 47 }>
  <With bar={ 'test' }>
    <span>{ foo }</span>
    <span>{ bar }</span>
  </With>
</With>
Prop Name Prop Type Required description
any name any type assign prop value to a local variable named by prop name

You may assign multiple variables with a single <With> statement. The defined variable is available only within the <With> block.

Transformation

<With> statements transform to immediately-invoked function expressions:

// before transformation
<With foo={47}>
  <span>{foo}</span>
</With>;

// after transformation
{
  (function(foo) {
    return <span>{foo}</span>;
  }.call(this, 47));
}

Linting

ESLint

Since all control statements are transformed via Babel, no require or import calls are needed. This in turn (well, and some more cases) would lead to warnings or errors by ESLint about undefined variables.

But fortunately you can use this ESLint plugin for JSX-Control-Statements to lint your code.

FlowType

There's still not a perfect solution for FlowType given that it doesn't provide a lot of plugin functionality (at least not yet). Flow definitions are available in jsx-control-statements.latest.flow.js for Flow >= 0.53, or jsx-control-statements.flow.js (deprecated) for Flow < 0.53 - you can pick which file to use like this. These will stop the type checker complaining about statements being undeclared. As of now there's no neat way to make the Flow checker recognise each attributes in <For> loops as a variable - the best workaround for now is something like:

render() {
  declare var eachVariable: string;

  return (
    <For each="eachVariable" of={["hello", "world"]}>
      {eachVariable}
    </For>
  );
}

If you know of a better way to work around this please let us know!

Alternative Solutions

Pure JavaScript

Since everything will be compiled to JavaScript anyway, you might prefer to stick to pure JavaScript solutions.

Conditionals

Probably the most common way for simple conditionals is the use of the && operator:

// simple if
{
  test && <span>true</span>;
}

// additionally the else branch
{
  !test && <span>false</span>;
}

The ternary operator is probably more elegant for if / else conditionals:

// simple
{
  test ? <span>true</span> : <span>false</span>;
}

// with multiple children
{
  test ? (
    [<span key="1">one</span>, <span key="2">two</span>]
  ) : (
    <span>false</span>
  );
}

Another approach is to refactor your conditional into a function:

testFunc(condition){
  if(condition) {
    return <span>true</span>;
  }
  else {
    return <span>false</span>
  }
}

render() {
  return (
    <div>{ testFunc(test) }</div>
  )
}

Loops

Not many options here:

{
  items.map(function(item) {
    <span key={item.id}>{item.title}</span>;
  });
}

Comparison

Arguments pro JSX-Control-Statements in comparison to pure JS solutions:

  • More intuitive and easier to handle for designers and people with non-heavy JS background
  • JSX does not get fragmented by JS statements
  • Better readability and neatness, but that probably depends on you

Cons:

  • Penalty on build-time performance
  • Depends on Babel 6
  • Some Babel configuration

React Components

There are a reasonable amount of React components for conditionals (e.g. react-if, which inspired this in the first place), JSX-Control-Statements is the only approach we know of that avoids execution of all branches (see the intro section), and there seems to be no other component-based solution to looping - while it would be possible to make a component that renders everything in props.children for every element of an array, you'd have to access the members of the array in that component instead of the one that uses it.

For more discussion on If in React by the react team, have a look at https://github.com/reactjs/react-future/issues/35.

To sum up:

  • Conditionals don't execute invalid paths
  • Loops with variable references to each element and index are made possible
  • No penalty on runtime performance
  • No import / require statements needed to use control statements
  • It works exactly as JSX is supposed to work: Plain syntactic sugar

Cons:

  • Depends on Babel 6
  • Some Babel configuration
  • Slightly longer build times
  • Requires an extra plugin to work with ESLint

What about Typescript?

There's a version for that by @KonstantinSimeonov!

Major Versions

  • 4.x.x is a pure Babel plugin supporting Babel >= 7.
  • 3.x.x is a pure Babel plugin supporting Babel >= 6.
  • 2.x.x was a Babel plugin supporting Babel >= 6, and a set of JSTransform visitors.
  • 1.x.x was a Babel plugin supporting Babel <= 5, and a set of JSTransform visitors.

This used to support both JSTransform and Babel, but as JSTransform is no longer maintained support was dropped. You can find the code for the JSTransform version at https://github.com/AlexGilleran/jsx-control-statements-jstransform.

I Want to Contribute!

Yay! Please read the Contributor's Guide.

Comments
  • With/let/def statement: define variables (suggestion/enhancement)

    With/let/def statement: define variables (suggestion/enhancement)

    There's this one piece of code where I want to run a method once and bind its result locally. It looks more or less like this:

    <For each="item" of={this.state.items}>
      (bunch of stuff)
      <Choose>
        <When condition={this.isExpanded(item)}>
          more stuff
        </When>
        <Otherwise>
          {((summary) => <Choose>
            <When condition={summary}>
              stuff that uses the summary variable
            </When>
            <Otherwise>
              also uses the variable
            </Otherwise>
          </Choose>)(this.getSummaryFields(item))}
        </Otherwise>
      </Choose>
    </For>
    

    Kind of makes my eyes bleed, and it's hard to see where the “variable” comes from.

    (Sorry if the example is not as minimal as possible, but I wanted to illustrate why I want it to begin with; if it wasn't inside a <For> I could just define it as a const on top of the render method.)

    Drawing from the ancient template languages of my young days…

        <Let summary={this.getSummaryFields(item)}>
          <Choose>
            <When condition={summary}>
              stuff that uses the summary variable
            </When>
            <Otherwise>
              also uses the variable
            </Otherwise>
          </Choose>
        </Let>
    

    (Or you could call it <With> or <Def> or a number of other things. Not <Const> though, that would make it look like it's doing something completely different.)

    A possible objection is that using prop names this way is iffy, and I guess some are already uncomfortable with the each and index props in <For>. An alternative, arguably more React-y:

    <With const={{summary: this.getSummaryFields(item)}}>
    

    It would expand of course to pretty much what I have on top, an in-place function, except no need for trickery with passing things as arguments.

    // for clarity, allow me the poetic license of not expanding the other jsx
    {(function() {
      const summary = this.getSummaryFields(item);
      return (
        <Choose>
          ...
        </Choose>
      );
    })()}
    
    

    Known issue: expanding it that way means it's limited to containing exactly one child.

    enhancement 
    opened by lalomartins 23
  • Improved If syntax including ElseIf support

    Improved If syntax including ElseIf support

    Since I wasn't happy with the choose syntax - hey, we should do better than JSP's! - I thought some more about how to realize the expected syntax. As it turns out Babel is just too powerful to not allow for that:

    <If condition={true}>
      ...
    </If>
    <ElseIf condition={false}>
      ...
    </ElseIf>
    <Else>
      ...
    </Else>
    

    So today, after a fruitful discussion with a colleague, I learned how to traverse paths within Babel to make this happen. I will open a PR soon.

    opened by texttechne 17
  • Support eslint

    Support eslint

    I appreciate this module and its various connectors. I use it well in an isomorphic app builded with gulp/webpack/babel.

    The only problem I have is the missing support of the module by lint tools, here is the output with eslint enhance with the react plugin:

    if.jsx
      74:9  error  'If' is not defined  react/jsx-no-undef
    
    for.jsx
      51:11  error  'For' is not defined      react/jsx-no-undef
      53:19  error  "item" is not defined  no-undef
      54:23  error  "item" is not defined  no-undef
    

    I can easily add an exception for If, Else and For but I can't skip the warning for the iterator variable (<For each="item" ...).

    Have you faced this problem before ? Is there an eslint plugin (existing or planned) ?

    enhancement 
    opened by ncuillery 17
  • Support For over objects

    Support For over objects

    I was expecting For to be able to iterate over objects and their keys/values, but it doesn't look like that's the case. Could you add support for this?

    opened by NullEntity 10
  • Added better Typescript support

    Added better Typescript support

    Hi, this pull request adds the same level of typescript support as tsx-control-statements. Sorry for the READMe.md, looks like my VSCODe reformatted it to its own format, if you wish I can undo those changes and try with the original format.

    opened by tomitrescak 9
  • Choose / Switch syntax instead of ElseIf and Else

    Choose / Switch syntax instead of ElseIf and Else

    Considering the nesting of <ElseIf> and <Else> they're just markers and cannot be indented automatically by IDE's. Correct indentation would look like this:

    <If condition={x}>
      IfBlock
      <ElseIf condition={y} />
      ElseIfBlock
      <Else />
      ElseBlock
    </If>
    

    So what about a choose statement (JSP style):

    <choose>
      <when condition={x}>
        IfBlock
      </when>
      <when condition={y}>
        ElseIfBlock
      </when>
      <otherwise>
        Else
      </otherwise>
    </choose>
    

    Or (misusing) switch style:

    <switch>
      <case condition={x}>
        IfBlock
      </case>
      <case condition={y}>
        ElseIfBlock
      </case>
      <default>
        Else
      </default>
    </choose>
    

    Maybe we should reserve the use of the switch statement instead of "abusing" the syntax. On the other hand we could also allow for an optional parameter for switch which allows exactly that, e.g. expression.

    <switch expression={x}>
      <case condition={12}>
        IfBlock
      </case>
      <case condition={"Never mind"}>
        ElseIfBlock
      </case>
      <default>
        Else
      </default>
    </choose>
    

    In any case I would tend to make otherwise / default optional, so that users are not forced to switch between if/else and switch syntax. Implementation-wise we would simply make use of the ternary operator. @AlexGilleran what do you think?

    enhancement 
    opened by texttechne 9
  • <If> creates <span> if not executed within <For> loop

    creates if not executed within loop

    If the <If ...> statement is not executed, then an empty <span> is rendered, due to the fact that an empty string is returned: See https://github.com/AlexGilleran/jsx-control-statements/blob/master/jstransform.js#L79

    Would be great if you would consider changing this empty string to null, so that nothing is rendered.

    Problematic cases are those where span tags are not allowed, e.g. within <tr> ord <td>. React throws warnings in this case...

    bug 
    opened by texttechne 9
  • Use

    Use "undefined" instead of null

    Hi, when the ternary operator is created with the null a ? <b/> : null it creates havoc with some react approaches, such as with hot reloading or with react tools. Is it possible to somehow redefine the structure of the generated ternary statement to use undefined or use && if no else exists?

    This seems to work fine: a ? <b/> : undefined

    Examples of problems:

    • https://github.com/facebook/react-devtools/issues/198
    • https://github.com/gadicc/meteor-hmr/issues/99
    opened by tomitrescak 8
  • Release 3.1.0

    Release 3.1.0

    First of all, since this release would only add new features, but doesn't break anything, I think it should be release version 3.1.0.

    Todos

    • [x] Fix #2
    • [x] Documentation of <Choose>
    • [x] Documentation of multiple elements and caveats
    • [x] Create issues for ESLint-Plugin
    • [x] Remove lodash

    I think, we should ship 3.1.0 when the ESLint-Plugin is ready.

    opened by texttechne 8
  • Can't use JSXExpressionContainer as a child

    Can't use JSXExpressionContainer as a child

    I'm using babel 6.2.1 with version 2.0.1 of the plugin. I'd like to do something along the lines of:

    <If condition={foo}>
      {'foo'}
    </If>
    

    Or with any expression that can be enclosed in {}. But I get a nasty error instead:

    Property consequent of ConditionalExpression expected node to be of a type ["Expression"] but instead got "JSXExpressionContainer" at Object.validate
    
    enhancement 
    opened by mwiencek 8
  • Make jsx-control-statements work with babel-6

    Make jsx-control-statements work with babel-6

    Hi there,

    I just love this package. It really improves readability of the jsx code when using control statements. However, the package does not seem to work anymore with babel-6.

    Probably due to the babel.Transformer not being present any more. I will try to take a shot at fixing it. Any help would be greatly appreciated.

    opened by tikiatua 8
  • Support babel macros

    Support babel macros

    Good day. It would be great if we could support macros as well. I am happy to raise a PR if its ok to proceed. Let me know your thoughts. @AlexGilleran

    opened by akilansengottaiyan 1
  • Problem with ./node_modules/tsx-control-statements/components.ts

    Problem with ./node_modules/tsx-control-statements/components.ts

    Problem

    Basically I get this message when implementing some lib component, for example For .

    image

    I'm using nextjs.

    I used this for installation in tsx:

    yarn add tsx-control-statements (https://www.npmjs.com/package/tsx-control-statements)

    yarn add --save-dev babel-plugin-jsx-control-statements

    babel file:

    {
      "presets": ["next/babel", "@babel/preset-typescript"],
      "plugins": [
        [
          "babel-plugin-styled-components",
          {
            "ssr": true,
            "displayName": true
          }
        ]
      ],
      "env": {
        "test": {
          "plugins": [
            [
              "babel-plugin-styled-components",
              {
                "ssr": false,
                "displayName": false
              }
            ],
            ["jsx-control-statements"],
            ["transform-react-inline-elements"]
          ]
        }
      }
    }
    
    opened by HugoFortunato 2
  • Bump ajv from 6.12.0 to 6.12.6

    Bump ajv from 6.12.0 to 6.12.6

    Bumps ajv from 6.12.0 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump pathval from 1.1.0 to 1.1.1

    Bump pathval from 1.1.0 to 1.1.1

    Bumps pathval from 1.1.0 to 1.1.1.

    Release notes

    Sourced from pathval's releases.

    v1.1.1

    Fixes a security issue around prototype pollution.

    Commits
    • db6c3e3 chore: v1.1.1
    • 7859e0e Merge pull request #60 from deleonio/fix/vulnerability-prototype-pollution
    • 49ce1f4 style: correct rule in package.json
    • c77b9d2 fix: prototype pollution vulnerability + working tests
    • 49031e4 chore: remove very old nodejs
    • 57730a9 chore: update deps and tool configuration
    • a123018 Merge pull request #55 from chaijs/remove-lgtm
    • 07eb4a8 Delete MAINTAINERS
    • a0147cd Merge pull request #54 from astorije/patch-1
    • aebb278 Center repo name on README
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by chai, a new releaser for pathval since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Why do we need ```transform-react-inline-elements``` plugin ?

    Why do we need ```transform-react-inline-elements``` plugin ?

    The features that you all provide can be done by step 1: Install via npm: npm install --save-dev babel-plugin-jsx-control-statements

    step 2: specify JSX-Control-Statements as Babel plugin, which you would typically do in your .babelrc

      ...
      "plugins": ["jsx-control-statements"]
    }```
    then why do we add extra plugin i.e. ``` transform-react-inline-elements```???
    opened by ProPhycient5 0
  • Bump glob-parent from 5.1.0 to 5.1.2

    Bump glob-parent from 5.1.0 to 5.1.2

    Bumps glob-parent from 5.1.0 to 5.1.2.

    Release notes

    Sourced from glob-parent's releases.

    v5.1.2

    Bug Fixes

    v5.1.1

    Bug Fixes

    Changelog

    Sourced from glob-parent's changelog.

    5.1.2 (2021-03-06)

    Bug Fixes

    6.0.0 (2021-05-03)

    ⚠ BREAKING CHANGES

    • Correct mishandled escaped path separators (#34)
    • upgrade scaffold, dropping node <10 support

    Bug Fixes

    • Correct mishandled escaped path separators (#34) (32f6d52), closes #32

    Miscellaneous Chores

    • upgrade scaffold, dropping node <10 support (e83d0c5)

    5.1.1 (2021-01-27)

    Bug Fixes

    Commits
    • eb2c439 chore: update changelog
    • 12bcb6c chore: release 5.1.2
    • f923116 fix: eliminate ReDoS (#36)
    • 0b014a7 chore: add JSDoc returns information (#33)
    • 2b24ebd chore: generate initial changelog
    • 9b6e874 chore: release 5.1.1
    • 749c35e ci: try wrapping the JOB_ID in a string
    • 5d39def ci: attempt to switch to published coveralls
    • 0b5b37f ci: put the npm step back in for only Windows
    • 473f5d8 ci: update azure build images
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Owner
Alex Gilleran
Developerer at @siteminder-au
Alex Gilleran
Static AST checker for a11y rules on JSX elements.

Get professional support for eslint-plugin-jsx-a11y on Tidelift eslint-plugin-jsx-a11y Static AST checker for accessibility rules on JSX elements. Rea

null 2.9k Sep 29, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Oct 5, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Oct 2, 2022
A desktop app for inspecting your React JS and React Native projects. macOS, Linux, and Windows.

Join our Community Slack Quick Installation Guide What is Reactotron? Reactotron is a macOS, Windows, and Linux app for inspecting your React JS and R

Infinite Red, Inc. 13.7k Sep 29, 2022
Chrome extension for improving and optimizing performance in React applications (Gatsby and Next.js compatible).

React Performance Tool Nominated for React Open Source Awards 2020 Reactime is a performance and debugging tool for React developers (Beta version for

OSLabs 1.7k Sep 28, 2022
fflow is a free, open-source developer tool to create React applications rapidly and with minimal effort using the simple drag and drop UI

fflow Supercharge your React development process Explore the docs » View Demo · Report Bug · Request Feature Give a ⭐️ if our project helped or intere

OSLabs Beta 116 Sep 6, 2022
An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.

React PWA v2 A highly scalable, Progressive Web Application foundation,boilerplate, with the best Developer Experience. Demo: https://demo.reactpwa.co

Atyantik 2.5k Oct 2, 2022
An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.

Carte Blanche IMPORTANT: This project is unfinished and not maintained. Do not try to use it, it likely does not work anymore. Carte Blanche is an iso

Carte Blanche 1.5k Aug 3, 2022
🎭A simple and effective Text Input with mask for ReactNative on iOS and Android. Includes obfuscation characters feature.

React Native Mask Input A simple and effective Text Input with mask for ReactNative on iOS, Android, and Web. No fancy stuff, it's basically a JavaScr

Caio Quirino Medeiros 150 Sep 27, 2022
Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries

prom-react Add Prometheus metrics to your React App. Built on top of promjs and react-performance libraries Scope and purpose The main objective of th

Cabify 10 Sep 12, 2022
An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.

This project has migrated to github.com/facebook/react The source code for the v3 of the extension can be found in the v3 branch. To build the v3 brow

Facebook 11k Oct 5, 2022
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.

React Testing Library Simple and complete React DOM testing utilities that encourage good testing practices. Read The Docs | Edit the docs Table of Co

Testing Library 17k Oct 2, 2022
Chai.js assertions and convenience functions for testing React Components with enzyme

chai-enzyme Chai.js assertions for enzyme. Table of Contents Installation Setup Debug output in assertion exceptions Assertions 1. checked() 1. classN

Product Hunt 793 Jul 31, 2022
Create, isolate and test modular UI components in React.

ui-harness Isolate, test and document modular UI with React using familiar describe/it testing semantics. http://uiharness.com Quick Start (1-minute)

Phil Cockfield 269 Dec 24, 2021
Plugin for http://unexpected.js.org to enable testing the full React virtual DOM, and also the shallow renderer

unexpected-react Plugin for unexpected to allow for testing the full virtual DOM, and against the shallow renderer (replaces unexpected-react-shallow)

Dave Brotherstone 185 Aug 17, 2022
A set of tools to facilitate react-redux development and decouple logic from compontents

react-redux-api-tools This project provides a middleware and a request helper to streamline react-redux data fetching. Installing Just run npm install

labcodes 37 Mar 14, 2022
⚛️ React testing made easy. Supports DOM and custom renderers.

Rut Rut is a DOM-less React testing library that aims to be lightweight, encourage great testing practices, and reduce flakiness and code smells. It i

Miles Johnson 15 May 22, 2022
A demo of LaunchDarkly, React, and Vite, using the Pokémon API!

Pokémon Feature Flags demo Here's a demo for integrating feature flags into a React project! Built with React, Vite, the PokeAPI, and LaunchDarkly! Wh

Cassidy Williams 15 Jan 5, 2022
Utopia is an integrated design and development environment for React.

Utopia is an integrated design and development environment for React. It uses React code as the source of truth, and lets you make real time changes to components by editing it and using a suite of design tools. It's early software, but you can try it today, look at an example project, or read about it on our blog!

Utopia 3.6k Sep 30, 2022