React-semantics NPM

Install

$ npm install react-semantics

Example usage

import { Show, List } from 'react-semantics';

const Menu = ({ showMenuItems }) => (
  <nav>
    <a href="/">Home</a>
    <Show when={showMenuItems}>
      <ul>
        <List
          items={['prices', 'contact', 'about']}
          render={m => (
            <li key={m}>
              <a href={`/${m}`}>{m}</a>
            </li>
          )}
        />
      </ul>
    </Show>
  </nav>
);

Why?

In the example above you see two very common use cases where you have to show something when a condition is true and map content from an array of data. This is normally 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 like with inline arrow functions.

const Menu = ({ showMenuItems }) => (
  <nav>
    <a href="/">Home</a>
    {showMenuItems ? (
      <ul>
        {['prices', 'contact', 'about'].map(m => (
          <li key={m}>
            <a href={`/${m}`}>{m}</a>
          </li>
        ))}
      </ul>
    ) : null}
  </nav>
)

The purpose of this library is to develop and maintain semantic helper components that removes the need for inline arrow functions in react components.

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

# Run tests
$ npm run test

# 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 component props must be documented with jsdoc /** */, so that typescript definition files can be generated.
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.