⚛️ 🔧 Lodash as React components
Switch branches/tags
Nothing to show
Clone or download
Latest commit f2113ce Oct 16, 2018
Permalink
Failed to load latest commit information.
__tests__ Commit Oct 3, 2018
generate Change case Oct 16, 2018
.babelrc Commit Oct 3, 2018
.eslintrc Update .eslintrc Oct 3, 2018
.gitignore Commit Oct 3, 2018
.npmignore Update .npmignore Oct 16, 2018
.travis.yml Update .travis.yml Oct 3, 2018
COMPONENTS.md Change case Oct 16, 2018
LICENSE Initial commit Oct 3, 2018
README.md Update README.md Oct 16, 2018
package-lock.json 0.1.1 Oct 16, 2018
package.json 0.1.1 Oct 16, 2018

README.md

react-lodash build status npm

Use any lodash function as a React component

Example

Without

import react from 'react'

array && array.length ? (
  <ul>
    {array.map(i => (
      <li key={i}>{i}</li>
    ))}
  </ul>
) : (
  'Empty list'
)

With

The example below uses lodash _.isEmpty and _.map as components.

import react from 'react'
import { IsEmpty, Map } from "react-lodash"

<IsEmpty
  value={array}
  yes="Empty list"
  no={() => (
    <ul>
      <Map collection={array} iteratee={i => <li key={i}>{i}</li>} />
    </ul>
  )}
/>

Install

npm install react-lodash

API

react-lodash uses lodash documentation for prop names.

For example, let's say you want to use _.get. Based on lodash documentation, it takes an object and path arguments, so <Get /> will have the same props.

const object = {
  a: {
    b: { 1 }
  }
}

const path = 'a.b'

// lodash
_.get(object, path)

// react-lodash
<Get object={object} path={path} />

Also every react-lodash component accepts a children render prop:

<Get object={object} path={path}>
  {value => <UpperCase string={value} />}
</Get>

For lodash functions that return a boolean, react-lodash components accept yes and no render props:

<IsEmpty
  value={array}
  yes={() => <p>empty</p>}
  no={() => <p>not empty</p>}
/>

Available components

See COMPONENTS.md to view all available components (296).

License

MIT

Patreon - Supporters