react-semantic-render

Semantic helper components for rendering content with React.

Install • Usage • Why • Development • Contributing • License

Install

Using npm:

$ npm install --save react-semantic-render

Using yarn:

$ yarn add react-semantic-render

Usage

Show

Renders content if when equals true.

Property	Type	Description
when	boolean	Conditional statement
render	function	Shorthand for primary content
children	node	Primary content

import { Show } from "react-semantic-render";

<Show when={true}>
  <button>click me!</button>
</Show>;

Use the render prop when you dont want your content evaluated unless a condition is true

import { Show } from "react-semantic-render";

<Show when={!!label} render={() => <button>{label}</button>} />;

List

Renders content from specified callback function from either render or children on each element of items.

Property	Type	Description
items	any[]	Array to map
render	function	Shorthand for primary content
children	node	Primary content

import { List } from "react-semantic-render";

<List items={["Jack", "Jane", "Joe"]}>{name => <span>{name}</span>}</List>;

Switch

Renders content from first Switch.Case that matches value, else Switch.Default if it exists.

Property	Type	Description
value	boolean	Conditional statement
children	node	Primary content

import { Switch } from "react-semantic-render";

<Switch value={3}>
  <Switch.Case value={3}>
    <span>Render me!</span>
  </Switch.Case>
  <Switch.Default>
    <button>Click me!</button>
  </Switch.Default>
</Switch>;

Why

In the example below you see two very common use cases where you have to render something when a condition is true and render content from an array of data. This is usually solved with inline arrow functions that are hard to read and easily becomes unmanageable in more complex components.

const App = ({ isLoading, results }) => (
    {results.length > 0 ? (
      <ul>
        {result.map(user => (
          <li key={user.id}>
            <span>{user.name}</span>
          </li>
        ))}
      </ul>
    ) : null}
);

Here you see how the component above could be rewritten with components from react-semantic-render. While it is abit more verbose, the readability is greatly increased and you immeadiatly see whats going on.

import { List, Switch } from "react-semantic-render";

const App = ({ isLoading, results }) => (
  <Show when={results.length > 0}>
    <ul>
      <List items={results}>
        {user => (
          <li key={user.id}>
            <span>{user.name}</span>
          </li>
        )}
      </List>
    </ul>
  </Show>
);

The purpose of this library is to provide helpful semantic render components that makes the React.Component render method easier to read and follow.

Do you have an idea about a component you think belong here? Tell us here!

Development

Install dependencies

$ yarn install

Run tests

$ yarn test

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style.

Commit style guide

We use conventional commits style. Read up on it before doing your first commit. Don't worry about making mistakes, commitlint will stop you and you can try again.

License

MIT