Ecosyste.ms: Awesome

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

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

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

lodash react utility

Last synced: 27 days ago
JSON representation

⚛️ 🔧 Lodash as React components

Lists

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) ✨