Nattily Primped Monster

    react-pattern-match

    3.0.1 • Public • Published

    react-pattern-match

    npm version Build Status codecov

    npm install -S react-pattern-match

    Is this really pattern matching? No, but it is fun to pretend.

    For React 16 and above only

    Basic

    const App = (props) => {
      return (
        <Match 
          value={4}
          render={eq => [
            eq(4, () => <Box name="I will render" />),
            eq(5, () => <Box name="I will not render" />),
            eq(() => 4, () => <Box name="I will render, fn value is equal" />)
          ]} 
        />
      )
    }

    Match

    Match uses lodash.isEqual to compare a given value vs one provided in the render callback.

    From the lodash docs

    Performs a deep comparison between two values to determine if they are equivalent. Note: This method supports comparing arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, > > and typed arrays. Object objects are compared by their own, not inherited, enumerable properties. Functions and DOM nodes are compared by strict equality, i.e. ===.

    props

    • value: any - Base value to compare against

    • render: function - Function that receives one argument, equal

      equal is a function that accepts 2 arguments:

      • test: any - Value to compare against value supplied in props

      • render: function - Function that returns children. Called only if lodash.isEqual(value, test)

    Function as Value

    If the value prop or test value are functions they will be called before being passed to lodash.isEqual.

    function getValue () {
      return ['a', 'b', 'c']
    }
     
    const App = (props) => {
      return (
        <Match
          value={getValue}
          render={eq => [
            eq(['a', 'b', 'c'], () => <Box name="should match array" />),
            eq(['a', 'b', 'c', 'd'], () =>
              <Box name="should not match array" />
            ),
            eq(() => ['a', 'b', 'c'], () => <Box name="should match fn" />),
            eq(
              () => ['a', 'b', 'c', 'd'],
              () => <Box name="should not match fn" />
            )
          ]}
        />
      )
    }

    Install

    npm i react-pattern-match

    DownloadsWeekly Downloads

    2

    Version

    3.0.1

    License

    MIT

    Last publish

    Collaborators

    • tkh44