react-lodash

Lodash as React components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-lodash
34720.1.24 years ago4 years agoMinified + gzip package size for react-lodash in KB

Readme

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 also try react-lodash on CodeSandbox 😉

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

Importing

You can either use named imports or individually import components
import { IsEmpty } from 'react-lodash'

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

Collection

  • <CountBy collection={} iteratee={} />.countBy
  • <Each collection={} iteratee={} />.each
  • <EachRight collection={} iteratee={} />.eachRight
  • <Every collection={} predicate={} />.every
  • <Filter collection={} predicate={} />.filter
  • <Find collection={} predicate={} fromIndex={} />.find
  • <FindLast collection={} predicate={} fromIndex={} />.findLast
  • <FlatMap collection={} iteratee={} />.flatMap
  • <FlatMapDeep collection={} iteratee={} />.flatMapDeep
  • <FlatMapDepth collection={} iteratee={} depth={} />.flatMapDepth
  • <GroupBy collection={} iteratee={} />.groupBy
  • <Includes collection={} value={} fromIndex={} />.includes
  • <InvokeMap collection={} path={} args={} />.invokeMap
  • <KeyBy collection={} iteratee={} />.keyBy
  • <Map collection={} iteratee={} />.map
  • <OrderBy collection={} iteratees={} orders={} />.orderBy
  • <Partition collection={} predicate={} />.partition
  • <Reduce collection={} iteratee={} accumulator={} />.reduce
  • <ReduceRight collection={} iteratee={} accumulator={} />.reduceRight
  • <Reject collection={} predicate={} />.reject
  • <Sample collection={} />.sample
  • <SampleSize collection={} n={} />.sampleSize
  • <Shuffle collection={} />.shuffle
  • <Size collection={} />.size
  • <Some collection={} predicate={} />.some
  • <SortBy collection={} iteratees={} />.sortBy

Date

Function

  • <After n={} func={} />.after
  • <Ary func={} n={} />.ary
  • <Before n={} func={} />.before
  • <Bind func={} thisArg={} partials={} />.bind
  • <BindKey object={} key={} partials={} />.bindKey
  • <Curry func={} arity={} />.curry
  • <CurryRight func={} arity={} />.curryRight
  • <Debounce func={} wait={} options={} />.debounce
  • <Defer func={} args={} />.defer
  • <Delay func={} wait={} args={} />.delay
  • <Flip func={} />.flip
  • <Memoize func={} resolver={} />.memoize
  • <Negate predicate={} />.negate
  • <Once func={} />.once
  • <OverArgs func={} transforms={} />.overArgs
  • <Partial func={} partials={} />.partial
  • <PartialRight func={} partials={} />.partialRight
  • <Rearg func={} indexes={} />.rearg
  • <Rest func={} start={} />.rest
  • <Spread func={} start={} />.spread
  • <Throttle func={} wait={} options={} />.throttle
  • <Unary func={} />.unary
  • <Wrap value={} wrapper={} />.wrap

Lang

Math

  • <Add augend={} addend={} />.add
  • <Ceil number={} precision={} />.ceil
  • <Divide dividend={} divisor={} />.divide
  • <Floor number={} precision={} />.floor
  • <Max array={} />.max
  • <MaxBy array={} iteratee={} />.maxBy
  • <Mean array={} />.mean
  • <MeanBy array={} iteratee={} />.meanBy
  • <Min array={} />.min
  • <MinBy array={} iteratee={} />.minBy
  • <Multiply multiplier={} multiplicand={} />.multiply
  • <Round number={} precision={} />.round
  • <Subtract minuend={} subtrahend={} />.subtract
  • <Sum array={} />.sum
  • <SumBy array={} iteratee={} />.sumBy

Number

  • <Clamp number={} lower={} upper={} />.clamp
  • <InRange number={} start={} end={} />.inRange
  • <Random lower={} upper={} floating={} />.random

Object

  • <Assign object={} sources={} />.assign
  • <AssignWith object={} sources={} customizer={} />.assignWith
  • <At object={} paths={} />.at
  • <Create prototype={} properties={} />.create
  • <Defaults object={} sources={} />.defaults
  • <DefaultsDeep object={} sources={} />.defaultsDeep
  • <Entries object={} />.entries
  • <EntriesIn object={} />.entriesIn
  • <Extend object={} sources={} />.extend
  • <ExtendWith object={} sources={} customizer={} />.extendWith
  • <FindKey object={} predicate={} />.findKey
  • <FindLastKey object={} predicate={} />.findLastKey
  • <ForIn object={} iteratee={} />.forIn
  • <ForInRight object={} iteratee={} />.forInRight
  • <ForOwn object={} iteratee={} />.forOwn
  • <ForOwnRight object={} iteratee={} />.forOwnRight
  • <Functions object={} />.functions
  • <FunctionsIn object={} />.functionsIn
  • <Get object={} path={} defaultValue={} />.get
  • <Has object={} path={} />.has
  • <HasIn object={} path={} />.hasIn
  • <Invert object={} />.invert
  • <InvertBy object={} iteratee={} />.invertBy
  • <Invoke object={} path={} args={} />.invoke
  • <Keys object={} />.keys
  • <KeysIn object={} />.keysIn
  • <MapKeys object={} iteratee={} />.mapKeys
  • <MapValues object={} iteratee={} />.mapValues
  • <Merge object={} sources={} />.merge
  • <MergeWith object={} sources={} customizer={} />.mergeWith
  • <Omit object={} paths={} />.omit
  • <OmitBy object={} predicate={} />.omitBy
  • <Pick object={} paths={} />.pick
  • <PickBy object={} predicate={} />.pickBy
  • <Result object={} path={} defaultValue={} />.result
  • <Set object={} path={} value={} />.set
  • <SetWith object={} path={} value={} customizer={} />.setWith
  • <Transform object={} iteratee={} accumulator={} />.transform
  • <Unset object={} path={} />.unset
  • <Update object={} path={} updater={} />.update
  • <UpdateWith object={} path={} updater={} customizer={} />.updateWith
  • <Values object={} />.values
  • <ValuesIn object={} />.valuesIn

Seq

  • <Chain value={} />.chain
  • <Tap value={} interceptor={} />.tap
  • <Thru value={} interceptor={} />.thru

String

Util

License

MIT
Patreon - Supporters