A collection of components for reducing inline logic in your React apps
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
lib
.babelrc
.eslintrc
.gitignore
.npmignore
CODE_OF_CONDUCT.md
LICENSE
README.md
package.json
yarn.lock

README.md

react-logical

A collection of components for reducing inline logic in your React apps

Installation

Add react-logical to your project:

$ yarn add react-logical

Or with npm:

$ npm install --save react-logical

Usage

We rarely want to display a blank string, so when a prop gets passed down, we inevitably have to do some checks. This can introduce pockets of curly braces with error prone boolean logic and ternary statements.

Instead of writing this:

import React from 'react';

const Greeting = ({ name }) => {
  return (
    <h1>
      {'Hello, '}
      {name && name.length > 0 ? name : 'World'}
      {'!'}
    </h1>
  );
}

Import String and write this:

import React from 'react';
import { String } from 'react-logical';

const Greeting = ({ name }) => {
  return (
    <h1>
      {'Hello, '}
      <String str={name} blankStr={'World'} />
      {'!'}
    </h1>
  );
}

We've removed a ternary statement from the component and made it more declarative. Yay!

License

© 2018 Josh Branchaud

This repository is licensed under the MIT license. See LICENSE for details.