react-logic-match
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

react-logic-match

Wrappers components for logical displaying

NPM JavaScript Style Guide

Install

npm install --save react-logic-match

Usage

import * as React from 'react'

import {Match, Switch, Case, Default} from 'react-logic-match'

class Example extends React.Component {
  render () {
    const error = new Error('msg in jsx');

    return (
        <>
            <Match condition={'foo' === 'bar'}>
              <p>'foo' === 'bar'</p>
            </Match>
            <Match condition={'foo' === 'foo'}>
              <p>'foo' === 'foo'</p>
            </Match>
            <Match condition={'bar' === 'foo'} fallback={<p>Fallback 'bar' === 'foo'</p>>
              <p>'bar' === 'foo'</p>
            </Match>
            <Match condition={'bar' === 'bar'}>
              <p>'bar' === 'bar'</p>
            </Match>
            <Match condition={error}>{() => {
              <p>{error.message}</p>
            }</Match>

            <Switch value={1}>
              <Case value={0}>
                <p>Case 0</p>
              </Case>
              <Default>
                <p>Default</p>
              </Default>
            </Switch>

            <Switch value={1}>
              <Case value={0}>
                <p>Case 0</p>
              </Case>
              <Case value={1}>
                <p>Case 1</p>
              </Case>
            </Switch>
        </>
    )
  }
}

API

  • <Match condition fallback> render children if condition props is truthy else fallback (null by default and optional)
  • <Switch value> rely on <Case value> and <Default>, ignore other children. Display first <Case> with value strictly equal from switch else <Default> or null if not given (with a console.warn)
  • <Case value> display his childen
  • <Default> display his children

See <Switch value>-<Case value>-<Default> as a simple js switch-case-default statement. without the cascasing and break behavior

For more info you can check the source code. It's strictly typed and not so much complicated

Since v1.0.7, children and fallbacks props can be render props (a function who return JSX)

License

MIT © tpoisseau

Readme

Keywords

none

Package Sidebar

Install

npm i react-logic-match

Weekly Downloads

0

Version

1.0.8

License

MIT

Unpacked Size

151 kB

Total Files

48

Last publish

Collaborators

  • tpoisseau