react-semantic-render

Semantic helper components for rendering content with React.

Key features • Install • Why • Documentation • Development • Contributing • Contributors • License

Key features

• Growing list of semantic helper components
  • List: Renders content from an array of data.
  • Show: Renders content when specified condition is true.
  • ShowAsync: Renders content when specified promise is pending, resolved and rejected.
  • Switch: Renders content from first Switch.Case that matches, else Switch.Default if it exists.
• Small bundle size
• Blazing fast
• TypeScript type definitions
• Above 90% test coverage

Install

Using npm:

$ npm install --save react-semantic-render

Using yarn:

$ yarn add react-semantic-render

Example usage

import { Show, List } from 'react-semantic-render';

<div>
  <Show when={true}>
    <List
      items={[1, 2, 3, 4, 5]}
      render={data => <div>{data}</div>}
    />
  </Show>
</div>

Why

In the example above 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.

Below you can see how it would look with inline arrow functions.

<div>
  {true ? (
    {[1, 2, 3, 4, 5].map(data => <div>{data}</div>)}
  ) : null}
</div>

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!

Documentation

For full list of components and how they are used, go to our documentation.

Development

Install dependencies

$ npm install

Run linters

$ npm run lint
$ npm run lint:fix

Run tests

$ npm run test
$ npm run test:watch

Build docs

$ npm run docs
$ npm run docs:server

Build project

$ npm run build

Contributing

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

• Add unit tests for any new or changed functionality.
• All library components exposed to the user must be documented with jsdoc /** */.
• All library components must have prop-types that matches the component props interface.

Commit style guide

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

Contributors

Christian Svenkerud 💻 📖 🤔 ⚠️	Leiv Fredrik Berge 💻 📖 🤔 ⚠️

License

MIT