Use any lodash function as a React component

Use any lodash function as a React component

Use any lodash function as a React component.

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>
  )}
/>

Demo

You can play with react-lodash on CodeSandbox

Edit react-lodash-example

Install

npm install react-lodash

Introduction

Why?

I wanted to know how things could be rewritten with lodash as components and if generating them directly from lodash JSDoc was possible.

The answer to the latter is obviously yes (otherwise, this repo wouldn't exist

Github Repository