Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/typicode/react-lodash

⚛️ 🔧 Lodash as React components
https://github.com/typicode/react-lodash

lodash react utility

Last synced: 29 days ago
JSON representation

⚛️ 🔧 Lodash as React components

Awesome Lists containing this project

README

        

# react-lodash [![build status](https://travis-ci.com/typicode/react-lodash.svg?branch=master)](https://travis-ci.com/typicode/react-lodash) [![npm](https://img.shields.io/npm/v/react-lodash.svg)](https://www.npmjs.com/package/react-lodash) ![](https://img.shields.io/badge/status-experiment-ff69b4.svg)

> Use any lodash function as a React component

## Example

### Without

```jsx
import react from 'react'

array && array.length ? (


    {array.map(i => (
  • {i}

  • ))}

) : (
'Empty list'
)
```

### With

The example below uses lodash [_.isEmpty](https://lodash.com/docs/4.17.10#isEmpty) and [_.map](https://lodash.com/docs/4.17.10#isEmpty) as components.

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

(


  • {i}
  • } />

)}
/>
```

## Demo

You can play with `react-lodash` on [CodeSandbox](https://codesandbox.io/s/r4lv71wx9q)

[![Edit react-lodash-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/r4lv71wx9q)

## Install

```sh
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 😉). `react-lodash` is therefore a 1:1 mapping with `lodash` API and all components are generated using `npm run generate`.

It also means that not all `react-lodash` components will make sense in a React app. Particularly the ones that mutate data.

> Does it work?

Yes, you can try it on [CodeSandbox](https://codesandbox.io/s/r4lv71wx9q).

> Should you use it?

If you have a personal/small project and want to play with `react-lodash`, feel free. Some components might be useful or provide some interesting features.

For bigger projects, you should probably stick to plain JS as it's more familiar and works better with typing systems.

In any case, I had fun building this project and I hope you'll find the idea entertaining :)

## API

react-lodash uses lodash documentation for prop names.

For example, let's say you want to use [`_.get`](https://lodash.com/docs/4.17.10#get). Based on lodash documentation, it takes an `object` and `path` arguments, so `` will have the same props.

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

const path = 'a.b'

// lodash
_.get(object, path)

// react-lodash

```

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

```jsx

{value => }

```

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

```jsx

empty

}
no={() =>

not empty

}
/>
```

## Importing

You can either use named imports or individually import components

```js
import { IsEmpty } from 'react-lodash'
```

```js
import IsEmpty from 'react-lodash/lib/IsEmpty'
```

## Components

Below you'll find the 296 available components. For detailed documentation, you can visit [https://lodash.com/docs](https://lodash.com/docs)

_Note: Since `react-lodash` is 1:1 mapping of `lodash`, maybe not all components will be relevant in a React application. But at least, you have many options ;)_

### Array
* `` → [_.chunk](https://lodash.com/docs/#chunk)
* `` → [_.compact](https://lodash.com/docs/#compact)
* `` → [_.concat](https://lodash.com/docs/#concat)
* `` → [_.difference](https://lodash.com/docs/#difference)
* `` → [_.differenceBy](https://lodash.com/docs/#differenceBy)
* `` → [_.differenceWith](https://lodash.com/docs/#differenceWith)
* `` → [_.drop](https://lodash.com/docs/#drop)
* `` → [_.dropRight](https://lodash.com/docs/#dropRight)
* `` → [_.dropRightWhile](https://lodash.com/docs/#dropRightWhile)
* `` → [_.dropWhile](https://lodash.com/docs/#dropWhile)
* `` → [_.fill](https://lodash.com/docs/#fill)
* `` → [_.findIndex](https://lodash.com/docs/#findIndex)
* `` → [_.findLastIndex](https://lodash.com/docs/#findLastIndex)
* `` → [_.first](https://lodash.com/docs/#first)
* `` → [_.flatten](https://lodash.com/docs/#flatten)
* `` → [_.flattenDeep](https://lodash.com/docs/#flattenDeep)
* `` → [_.flattenDepth](https://lodash.com/docs/#flattenDepth)
* `` → [_.fromPairs](https://lodash.com/docs/#fromPairs)
* `` → [_.indexOf](https://lodash.com/docs/#indexOf)
* `` → [_.initial](https://lodash.com/docs/#initial)
* `` → [_.intersection](https://lodash.com/docs/#intersection)
* `` → [_.intersectionBy](https://lodash.com/docs/#intersectionBy)
* `` → [_.intersectionWith](https://lodash.com/docs/#intersectionWith)
* `` → [_.join](https://lodash.com/docs/#join)
* `` → [_.last](https://lodash.com/docs/#last)
* `` → [_.lastIndexOf](https://lodash.com/docs/#lastIndexOf)
* `` → [_.nth](https://lodash.com/docs/#nth)
* `` → [_.pull](https://lodash.com/docs/#pull)
* `` → [_.pullAll](https://lodash.com/docs/#pullAll)
* `` → [_.pullAllBy](https://lodash.com/docs/#pullAllBy)
* `` → [_.pullAllWith](https://lodash.com/docs/#pullAllWith)
* `` → [_.pullAt](https://lodash.com/docs/#pullAt)
* `` → [_.remove](https://lodash.com/docs/#remove)
* `` → [_.reverse](https://lodash.com/docs/#reverse)
* `` → [_.slice](https://lodash.com/docs/#slice)
* `` → [_.sortedIndex](https://lodash.com/docs/#sortedIndex)
* `` → [_.sortedIndexBy](https://lodash.com/docs/#sortedIndexBy)
* `` → [_.sortedIndexOf](https://lodash.com/docs/#sortedIndexOf)
* `` → [_.sortedLastIndex](https://lodash.com/docs/#sortedLastIndex)
* `` → [_.sortedLastIndexBy](https://lodash.com/docs/#sortedLastIndexBy)
* `` → [_.sortedLastIndexOf](https://lodash.com/docs/#sortedLastIndexOf)
* `` → [_.sortedUniq](https://lodash.com/docs/#sortedUniq)
* `` → [_.sortedUniqBy](https://lodash.com/docs/#sortedUniqBy)
* `` → [_.tail](https://lodash.com/docs/#tail)
* `` → [_.take](https://lodash.com/docs/#take)
* `` → [_.takeRight](https://lodash.com/docs/#takeRight)
* `` → [_.takeRightWhile](https://lodash.com/docs/#takeRightWhile)
* `` → [_.takeWhile](https://lodash.com/docs/#takeWhile)
* `` → [_.union](https://lodash.com/docs/#union)
* `` → [_.unionBy](https://lodash.com/docs/#unionBy)
* `` → [_.unionWith](https://lodash.com/docs/#unionWith)
* `` → [_.uniq](https://lodash.com/docs/#uniq)
* `` → [_.uniqBy](https://lodash.com/docs/#uniqBy)
* `` → [_.uniqWith](https://lodash.com/docs/#uniqWith)
* `` → [_.unzip](https://lodash.com/docs/#unzip)
* `` → [_.unzipWith](https://lodash.com/docs/#unzipWith)
* `` → [_.without](https://lodash.com/docs/#without)
* `` → [_.xor](https://lodash.com/docs/#xor)
* `` → [_.xorBy](https://lodash.com/docs/#xorBy)
* `` → [_.xorWith](https://lodash.com/docs/#xorWith)
* `` → [_.zip](https://lodash.com/docs/#zip)
* `` → [_.zipObject](https://lodash.com/docs/#zipObject)
* `` → [_.zipObjectDeep](https://lodash.com/docs/#zipObjectDeep)
* `` → [_.zipWith](https://lodash.com/docs/#zipWith)

### Collection
* `` → [_.countBy](https://lodash.com/docs/#countBy)
* `` → [_.each](https://lodash.com/docs/#each)
* `` → [_.eachRight](https://lodash.com/docs/#eachRight)
* `` → [_.every](https://lodash.com/docs/#every)
* `` → [_.filter](https://lodash.com/docs/#filter)
* `` → [_.find](https://lodash.com/docs/#find)
* `` → [_.findLast](https://lodash.com/docs/#findLast)
* `` → [_.flatMap](https://lodash.com/docs/#flatMap)
* `` → [_.flatMapDeep](https://lodash.com/docs/#flatMapDeep)
* `` → [_.flatMapDepth](https://lodash.com/docs/#flatMapDepth)
* `` → [_.groupBy](https://lodash.com/docs/#groupBy)
* `` → [_.includes](https://lodash.com/docs/#includes)
* `` → [_.invokeMap](https://lodash.com/docs/#invokeMap)
* `` → [_.keyBy](https://lodash.com/docs/#keyBy)
* `` → [_.map](https://lodash.com/docs/#map)
* `` → [_.orderBy](https://lodash.com/docs/#orderBy)
* `` → [_.partition](https://lodash.com/docs/#partition)
* `` → [_.reduce](https://lodash.com/docs/#reduce)
* `` → [_.reduceRight](https://lodash.com/docs/#reduceRight)
* `` → [_.reject](https://lodash.com/docs/#reject)
* `` → [_.sample](https://lodash.com/docs/#sample)
* `` → [_.sampleSize](https://lodash.com/docs/#sampleSize)
* `` → [_.shuffle](https://lodash.com/docs/#shuffle)
* `` → [_.size](https://lodash.com/docs/#size)
* `` → [_.some](https://lodash.com/docs/#some)
* `` → [_.sortBy](https://lodash.com/docs/#sortBy)

### Date
* `` → [_.now](https://lodash.com/docs/#now)

### Function
* `` → [_.after](https://lodash.com/docs/#after)
* `` → [_.ary](https://lodash.com/docs/#ary)
* `` → [_.before](https://lodash.com/docs/#before)
* `` → [_.bind](https://lodash.com/docs/#bind)
* `` → [_.bindKey](https://lodash.com/docs/#bindKey)
* `` → [_.curry](https://lodash.com/docs/#curry)
* `` → [_.curryRight](https://lodash.com/docs/#curryRight)
* `` → [_.debounce](https://lodash.com/docs/#debounce)
* `` → [_.defer](https://lodash.com/docs/#defer)
* `` → [_.delay](https://lodash.com/docs/#delay)
* `` → [_.flip](https://lodash.com/docs/#flip)
* `` → [_.memoize](https://lodash.com/docs/#memoize)
* `` → [_.negate](https://lodash.com/docs/#negate)
* `` → [_.once](https://lodash.com/docs/#once)
* `` → [_.overArgs](https://lodash.com/docs/#overArgs)
* `` → [_.partial](https://lodash.com/docs/#partial)
* `` → [_.partialRight](https://lodash.com/docs/#partialRight)
* `` → [_.rearg](https://lodash.com/docs/#rearg)
* `` → [_.rest](https://lodash.com/docs/#rest)
* `` → [_.spread](https://lodash.com/docs/#spread)
* `` → [_.throttle](https://lodash.com/docs/#throttle)
* `` → [_.unary](https://lodash.com/docs/#unary)
* `` → [_.wrap](https://lodash.com/docs/#wrap)

### Lang
* `` → [_.castArray](https://lodash.com/docs/#castArray)
* `` → [_.clone](https://lodash.com/docs/#clone)
* `` → [_.cloneDeep](https://lodash.com/docs/#cloneDeep)
* `` → [_.cloneDeepWith](https://lodash.com/docs/#cloneDeepWith)
* `` → [_.cloneWith](https://lodash.com/docs/#cloneWith)
* `` → [_.conformsTo](https://lodash.com/docs/#conformsTo)
* `` → [_.eq](https://lodash.com/docs/#eq)
* `` → [_.gt](https://lodash.com/docs/#gt)
* `` → [_.gte](https://lodash.com/docs/#gte)
* `` → [_.isArguments](https://lodash.com/docs/#isArguments)
* `` → [_.isArray](https://lodash.com/docs/#isArray)
* `` → [_.isArrayBuffer](https://lodash.com/docs/#isArrayBuffer)
* `` → [_.isArrayLike](https://lodash.com/docs/#isArrayLike)
* `` → [_.isArrayLikeObject](https://lodash.com/docs/#isArrayLikeObject)
* `` → [_.isBoolean](https://lodash.com/docs/#isBoolean)
* `` → [_.isBuffer](https://lodash.com/docs/#isBuffer)
* `` → [_.isDate](https://lodash.com/docs/#isDate)
* `` → [_.isElement](https://lodash.com/docs/#isElement)
* `` → [_.isEmpty](https://lodash.com/docs/#isEmpty)
* `` → [_.isEqual](https://lodash.com/docs/#isEqual)
* `` → [_.isEqualWith](https://lodash.com/docs/#isEqualWith)
* `` → [_.isError](https://lodash.com/docs/#isError)
* `` → [_.isFinite](https://lodash.com/docs/#isFinite)
* `` → [_.isFunction](https://lodash.com/docs/#isFunction)
* `` → [_.isInteger](https://lodash.com/docs/#isInteger)
* `` → [_.isLength](https://lodash.com/docs/#isLength)
* `` → [_.isMap](https://lodash.com/docs/#isMap)
* `` → [_.isMatch](https://lodash.com/docs/#isMatch)
* `` → [_.isMatchWith](https://lodash.com/docs/#isMatchWith)
* `` → [_.isNaN](https://lodash.com/docs/#isNaN)
* `` → [_.isNative](https://lodash.com/docs/#isNative)
* `` → [_.isNil](https://lodash.com/docs/#isNil)
* `` → [_.isNull](https://lodash.com/docs/#isNull)
* `` → [_.isNumber](https://lodash.com/docs/#isNumber)
* `` → [_.isObject](https://lodash.com/docs/#isObject)
* `` → [_.isObjectLike](https://lodash.com/docs/#isObjectLike)
* `` → [_.isPlainObject](https://lodash.com/docs/#isPlainObject)
* `` → [_.isRegExp](https://lodash.com/docs/#isRegExp)
* `` → [_.isSafeInteger](https://lodash.com/docs/#isSafeInteger)
* `` → [_.isSet](https://lodash.com/docs/#isSet)
* `` → [_.isString](https://lodash.com/docs/#isString)
* `` → [_.isSymbol](https://lodash.com/docs/#isSymbol)
* `` → [_.isTypedArray](https://lodash.com/docs/#isTypedArray)
* `` → [_.isUndefined](https://lodash.com/docs/#isUndefined)
* `` → [_.isWeakMap](https://lodash.com/docs/#isWeakMap)
* `` → [_.isWeakSet](https://lodash.com/docs/#isWeakSet)
* `` → [_.lt](https://lodash.com/docs/#lt)
* `` → [_.lte](https://lodash.com/docs/#lte)
* `` → [_.toArray](https://lodash.com/docs/#toArray)
* `` → [_.toFinite](https://lodash.com/docs/#toFinite)
* `` → [_.toInteger](https://lodash.com/docs/#toInteger)
* `` → [_.toLength](https://lodash.com/docs/#toLength)
* `` → [_.toNumber](https://lodash.com/docs/#toNumber)
* `` → [_.toPlainObject](https://lodash.com/docs/#toPlainObject)
* `` → [_.toSafeInteger](https://lodash.com/docs/#toSafeInteger)
* `` → [_.toString](https://lodash.com/docs/#toString)

### Math
* `` → [_.add](https://lodash.com/docs/#add)
* `` → [_.ceil](https://lodash.com/docs/#ceil)
* `` → [_.divide](https://lodash.com/docs/#divide)
* `` → [_.floor](https://lodash.com/docs/#floor)
* `` → [_.max](https://lodash.com/docs/#max)
* `` → [_.maxBy](https://lodash.com/docs/#maxBy)
* `` → [_.mean](https://lodash.com/docs/#mean)
* `` → [_.meanBy](https://lodash.com/docs/#meanBy)
* `` → [_.min](https://lodash.com/docs/#min)
* `` → [_.minBy](https://lodash.com/docs/#minBy)
* `` → [_.multiply](https://lodash.com/docs/#multiply)
* `` → [_.round](https://lodash.com/docs/#round)
* `` → [_.subtract](https://lodash.com/docs/#subtract)
* `` → [_.sum](https://lodash.com/docs/#sum)
* `` → [_.sumBy](https://lodash.com/docs/#sumBy)

### Number
* `` → [_.clamp](https://lodash.com/docs/#clamp)
* `` → [_.inRange](https://lodash.com/docs/#inRange)
* `` → [_.random](https://lodash.com/docs/#random)

### Object
* `` → [_.assign](https://lodash.com/docs/#assign)
* `` → [_.assignWith](https://lodash.com/docs/#assignWith)
* `` → [_.at](https://lodash.com/docs/#at)
* `` → [_.create](https://lodash.com/docs/#create)
* `` → [_.defaults](https://lodash.com/docs/#defaults)
* `` → [_.defaultsDeep](https://lodash.com/docs/#defaultsDeep)
* `` → [_.entries](https://lodash.com/docs/#entries)
* `` → [_.entriesIn](https://lodash.com/docs/#entriesIn)
* `` → [_.extend](https://lodash.com/docs/#extend)
* `` → [_.extendWith](https://lodash.com/docs/#extendWith)
* `` → [_.findKey](https://lodash.com/docs/#findKey)
* `` → [_.findLastKey](https://lodash.com/docs/#findLastKey)
* `` → [_.forIn](https://lodash.com/docs/#forIn)
* `` → [_.forInRight](https://lodash.com/docs/#forInRight)
* `` → [_.forOwn](https://lodash.com/docs/#forOwn)
* `` → [_.forOwnRight](https://lodash.com/docs/#forOwnRight)
* `` → [_.functions](https://lodash.com/docs/#functions)
* `` → [_.functionsIn](https://lodash.com/docs/#functionsIn)
* `` → [_.get](https://lodash.com/docs/#get)
* `` → [_.has](https://lodash.com/docs/#has)
* `` → [_.hasIn](https://lodash.com/docs/#hasIn)
* `` → [_.invert](https://lodash.com/docs/#invert)
* `` → [_.invertBy](https://lodash.com/docs/#invertBy)
* `` → [_.invoke](https://lodash.com/docs/#invoke)
* `` → [_.keys](https://lodash.com/docs/#keys)
* `` → [_.keysIn](https://lodash.com/docs/#keysIn)
* `` → [_.mapKeys](https://lodash.com/docs/#mapKeys)
* `` → [_.mapValues](https://lodash.com/docs/#mapValues)
* `` → [_.merge](https://lodash.com/docs/#merge)
* `` → [_.mergeWith](https://lodash.com/docs/#mergeWith)
* `` → [_.omit](https://lodash.com/docs/#omit)
* `` → [_.omitBy](https://lodash.com/docs/#omitBy)
* `` → [_.pick](https://lodash.com/docs/#pick)
* `` → [_.pickBy](https://lodash.com/docs/#pickBy)
* `` → [_.result](https://lodash.com/docs/#result)
* `` → [_.set](https://lodash.com/docs/#set)
* `` → [_.setWith](https://lodash.com/docs/#setWith)
* `` → [_.transform](https://lodash.com/docs/#transform)
* `` → [_.unset](https://lodash.com/docs/#unset)
* `` → [_.update](https://lodash.com/docs/#update)
* `` → [_.updateWith](https://lodash.com/docs/#updateWith)
* `` → [_.values](https://lodash.com/docs/#values)
* `` → [_.valuesIn](https://lodash.com/docs/#valuesIn)

### Seq
* `` → [_.chain](https://lodash.com/docs/#chain)
* `` → [_.tap](https://lodash.com/docs/#tap)
* `` → [_.thru](https://lodash.com/docs/#thru)

### String
* `` → [_.camelCase](https://lodash.com/docs/#camelCase)
* `` → [_.capitalize](https://lodash.com/docs/#capitalize)
* `` → [_.deburr](https://lodash.com/docs/#deburr)
* `` → [_.endsWith](https://lodash.com/docs/#endsWith)
* `` → [_.escape](https://lodash.com/docs/#escape)
* `` → [_.escapeRegExp](https://lodash.com/docs/#escapeRegExp)
* `` → [_.kebabCase](https://lodash.com/docs/#kebabCase)
* `` → [_.lowerCase](https://lodash.com/docs/#lowerCase)
* `` → [_.lowerFirst](https://lodash.com/docs/#lowerFirst)
* `` → [_.pad](https://lodash.com/docs/#pad)
* `` → [_.padEnd](https://lodash.com/docs/#padEnd)
* `` → [_.padStart](https://lodash.com/docs/#padStart)
* `` → [_.parseInt](https://lodash.com/docs/#parseInt)
* `` → [_.repeat](https://lodash.com/docs/#repeat)
* `` → [_.replace](https://lodash.com/docs/#replace)
* `` → [_.snakeCase](https://lodash.com/docs/#snakeCase)
* `` → [_.split](https://lodash.com/docs/#split)
* `` → [_.startCase](https://lodash.com/docs/#startCase)
* `` → [_.startsWith](https://lodash.com/docs/#startsWith)
* `` → [_.template](https://lodash.com/docs/#template)
* `` → [_.toLower](https://lodash.com/docs/#toLower)
* `` → [_.toUpper](https://lodash.com/docs/#toUpper)
* `` → [_.trim](https://lodash.com/docs/#trim)
* `` → [_.trimEnd](https://lodash.com/docs/#trimEnd)
* `` → [_.trimStart](https://lodash.com/docs/#trimStart)
* `` → [_.truncate](https://lodash.com/docs/#truncate)
* `` → [_.unescape](https://lodash.com/docs/#unescape)
* `` → [_.upperCase](https://lodash.com/docs/#upperCase)
* `` → [_.upperFirst](https://lodash.com/docs/#upperFirst)
* `` → [_.words](https://lodash.com/docs/#words)

### Util
* `` → [_.attempt](https://lodash.com/docs/#attempt)
* `` → [_.bindAll](https://lodash.com/docs/#bindAll)
* `` → [_.cond](https://lodash.com/docs/#cond)
* `` → [_.conforms](https://lodash.com/docs/#conforms)
* `` → [_.constant](https://lodash.com/docs/#constant)
* `` → [_.defaultTo](https://lodash.com/docs/#defaultTo)
* `` → [_.flow](https://lodash.com/docs/#flow)
* `` → [_.flowRight](https://lodash.com/docs/#flowRight)
* `` → [_.identity](https://lodash.com/docs/#identity)
* `` → [_.iteratee](https://lodash.com/docs/#iteratee)
* `` → [_.matches](https://lodash.com/docs/#matches)
* `` → [_.matchesProperty](https://lodash.com/docs/#matchesProperty)
* `` → [_.method](https://lodash.com/docs/#method)
* `` → [_.methodOf](https://lodash.com/docs/#methodOf)
* `` → [_.mixin](https://lodash.com/docs/#mixin)
* `` → [_.noop](https://lodash.com/docs/#noop)
* `` → [_.nthArg](https://lodash.com/docs/#nthArg)
* `` → [_.over](https://lodash.com/docs/#over)
* `` → [_.overEvery](https://lodash.com/docs/#overEvery)
* `` → [_.overSome](https://lodash.com/docs/#overSome)
* `` → [_.property](https://lodash.com/docs/#property)
* `` → [_.propertyOf](https://lodash.com/docs/#propertyOf)
* `` → [_.range](https://lodash.com/docs/#range)
* `` → [_.rangeRight](https://lodash.com/docs/#rangeRight)
* `` → [_.stubArray](https://lodash.com/docs/#stubArray)
* `` → [_.stubFalse](https://lodash.com/docs/#stubFalse)
* `` → [_.stubObject](https://lodash.com/docs/#stubObject)
* `` → [_.stubString](https://lodash.com/docs/#stubString)
* `` → [_.stubTrue](https://lodash.com/docs/#stubTrue)
* `` → [_.times](https://lodash.com/docs/#times)
* `` → [_.toPath](https://lodash.com/docs/#toPath)
* `` → [_.uniqueId](https://lodash.com/docs/#uniqueId)

## License

MIT

[Patreon](https://www.patreon.com/typicode) - [Supporters](https://thanks.typicode.com) ✨