react-lodash

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

• <Chunk array={} size={} /> → _.chunk
• <Compact array={} /> → _.compact
• <Concat array={} values={} /> → _.concat
• <Difference array={} values={} /> → _.difference
• <DifferenceBy array={} values={} iteratee={} /> → _.differenceBy
• <DifferenceWith array={} values={} comparator={} /> → _.differenceWith
• <Drop array={} n={} /> → _.drop
• <DropRight array={} n={} /> → _.dropRight
• <DropRightWhile array={} predicate={} /> → _.dropRightWhile
• <DropWhile array={} predicate={} /> → _.dropWhile
• <Fill array={} value={} start={} end={} /> → _.fill
• <FindIndex array={} predicate={} fromIndex={} /> → _.findIndex
• <FindLastIndex array={} predicate={} fromIndex={} /> → _.findLastIndex
• <First array={} /> → _.first
• <Flatten array={} /> → _.flatten
• <FlattenDeep array={} /> → _.flattenDeep
• <FlattenDepth array={} depth={} /> → _.flattenDepth
• <FromPairs pairs={} /> → _.fromPairs
• <IndexOf array={} value={} fromIndex={} /> → _.indexOf
• <Initial array={} /> → _.initial
• <Intersection arrays={} /> → _.intersection
• <IntersectionBy arrays={} iteratee={} /> → _.intersectionBy
• <IntersectionWith arrays={} comparator={} /> → _.intersectionWith
• <Join array={} separator={} /> → _.join
• <Last array={} /> → _.last
• <LastIndexOf array={} value={} fromIndex={} /> → _.lastIndexOf
• <Nth array={} n={} /> → _.nth
• <Pull array={} values={} /> → _.pull
• <PullAll array={} values={} /> → _.pullAll
• <PullAllBy array={} values={} iteratee={} /> → _.pullAllBy
• <PullAllWith array={} values={} comparator={} /> → _.pullAllWith
• <PullAt array={} indexes={} /> → _.pullAt
• <Remove array={} predicate={} /> → _.remove
• <Reverse array={} /> → _.reverse
• <Slice array={} start={} end={} /> → _.slice
• <SortedIndex array={} value={} /> → _.sortedIndex
• <SortedIndexBy array={} value={} iteratee={} /> → _.sortedIndexBy
• <SortedIndexOf array={} value={} /> → _.sortedIndexOf
• <SortedLastIndex array={} value={} /> → _.sortedLastIndex
• <SortedLastIndexBy array={} value={} iteratee={} /> → _.sortedLastIndexBy
• <SortedLastIndexOf array={} value={} /> → _.sortedLastIndexOf
• <SortedUniq array={} /> → _.sortedUniq
• <SortedUniqBy array={} iteratee={} /> → _.sortedUniqBy
• <Tail array={} /> → _.tail
• <Take array={} n={} /> → _.take
• <TakeRight array={} n={} /> → _.takeRight
• <TakeRightWhile array={} predicate={} /> → _.takeRightWhile
• <TakeWhile array={} predicate={} /> → _.takeWhile
• <Union arrays={} /> → _.union
• <UnionBy arrays={} iteratee={} /> → _.unionBy
• <UnionWith arrays={} comparator={} /> → _.unionWith
• <Uniq array={} /> → _.uniq
• <UniqBy array={} iteratee={} /> → _.uniqBy
• <UniqWith array={} comparator={} /> → _.uniqWith
• <Unzip array={} /> → _.unzip
• <UnzipWith array={} iteratee={} /> → _.unzipWith
• <Without array={} values={} /> → _.without
• <Xor arrays={} /> → _.xor
• <XorBy arrays={} iteratee={} /> → _.xorBy
• <XorWith arrays={} comparator={} /> → _.xorWith
• <Zip arrays={} /> → _.zip
• <ZipObject props={} values={} /> → _.zipObject
• <ZipObjectDeep props={} values={} /> → _.zipObjectDeep
• <ZipWith arrays={} iteratee={} /> → _.zipWith

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

• <Now /> → _.now

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

• <CastArray value={} /> → _.castArray
• <Clone value={} /> → _.clone
• <CloneDeep value={} /> → _.cloneDeep
• <CloneDeepWith value={} customizer={} /> → _.cloneDeepWith
• <CloneWith value={} customizer={} /> → _.cloneWith
• <ConformsTo object={} source={} /> → _.conformsTo
• <Eq value={} other={} /> → _.eq
• <Gt value={} other={} /> → _.gt
• <Gte value={} other={} /> → _.gte
• <IsArguments value={} /> → _.isArguments
• <IsArray value={} /> → _.isArray
• <IsArrayBuffer value={} /> → _.isArrayBuffer
• <IsArrayLike value={} /> → _.isArrayLike
• <IsArrayLikeObject value={} /> → _.isArrayLikeObject
• <IsBoolean value={} /> → _.isBoolean
• <IsBuffer value={} /> → _.isBuffer
• <IsDate value={} /> → _.isDate
• <IsElement value={} /> → _.isElement
• <IsEmpty value={} /> → _.isEmpty
• <IsEqual value={} other={} /> → _.isEqual
• <IsEqualWith value={} other={} customizer={} /> → _.isEqualWith
• <IsError value={} /> → _.isError
• <IsFinite value={} /> → _.isFinite
• <IsFunction value={} /> → _.isFunction
• <IsInteger value={} /> → _.isInteger
• <IsLength value={} /> → _.isLength
• <IsMap value={} /> → _.isMap
• <IsMatch object={} source={} /> → _.isMatch
• <IsMatchWith object={} source={} customizer={} /> → _.isMatchWith
• <IsNaN value={} /> → _.isNaN
• <IsNative value={} /> → _.isNative
• <IsNil value={} /> → _.isNil
• <IsNull value={} /> → _.isNull
• <IsNumber value={} /> → _.isNumber
• <IsObject value={} /> → _.isObject
• <IsObjectLike value={} /> → _.isObjectLike
• <IsPlainObject value={} /> → _.isPlainObject
• <IsRegExp value={} /> → _.isRegExp
• <IsSafeInteger value={} /> → _.isSafeInteger
• <IsSet value={} /> → _.isSet
• <IsString value={} /> → _.isString
• <IsSymbol value={} /> → _.isSymbol
• <IsTypedArray value={} /> → _.isTypedArray
• <IsUndefined value={} /> → _.isUndefined
• <IsWeakMap value={} /> → _.isWeakMap
• <IsWeakSet value={} /> → _.isWeakSet
• <Lt value={} other={} /> → _.lt
• <Lte value={} other={} /> → _.lte
• <ToArray value={} /> → _.toArray
• <ToFinite value={} /> → _.toFinite
• <ToInteger value={} /> → _.toInteger
• <ToLength value={} /> → _.toLength
• <ToNumber value={} /> → _.toNumber
• <ToPlainObject value={} /> → _.toPlainObject
• <ToSafeInteger value={} /> → _.toSafeInteger
• <ToString value={} /> → _.toString

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

• <CamelCase string={} /> → _.camelCase
• <Capitalize string={} /> → _.capitalize
• <Deburr string={} /> → _.deburr
• <EndsWith string={} target={} position={} /> → _.endsWith
• <Escape string={} /> → _.escape
• <EscapeRegExp string={} /> → _.escapeRegExp
• <KebabCase string={} /> → _.kebabCase
• <LowerCase string={} /> → _.lowerCase
• <LowerFirst string={} /> → _.lowerFirst
• <Pad string={} length={} chars={} /> → _.pad
• <PadEnd string={} length={} chars={} /> → _.padEnd
• <PadStart string={} length={} chars={} /> → _.padStart
• <ParseInt string={} radix={} /> → _.parseInt
• <Repeat string={} n={} /> → _.repeat
• <Replace string={} pattern={} replacement={} /> → _.replace
• <SnakeCase string={} /> → _.snakeCase
• <Split string={} separator={} limit={} /> → _.split
• <StartCase string={} /> → _.startCase
• <StartsWith string={} target={} position={} /> → _.startsWith
• <Template string={} options={} /> → _.template
• <ToLower string={} /> → _.toLower
• <ToUpper string={} /> → _.toUpper
• <Trim string={} chars={} /> → _.trim
• <TrimEnd string={} chars={} /> → _.trimEnd
• <TrimStart string={} chars={} /> → _.trimStart
• <Truncate string={} options={} /> → _.truncate
• <Unescape string={} /> → _.unescape
• <UpperCase string={} /> → _.upperCase
• <UpperFirst string={} /> → _.upperFirst
• <Words string={} pattern={} /> → _.words

Util

• <Attempt func={} args={} /> → _.attempt
• <BindAll object={} methodNames={} /> → _.bindAll
• <Cond pairs={} /> → _.cond
• <Conforms source={} /> → _.conforms
• <Constant value={} /> → _.constant
• <DefaultTo value={} defaultValue={} /> → _.defaultTo
• <Flow funcs={} /> → _.flow
• <FlowRight funcs={} /> → _.flowRight
• <Identity value={} /> → _.identity
• <Iteratee func={} /> → _.iteratee
• <Matches source={} /> → _.matches
• <MatchesProperty path={} srcValue={} /> → _.matchesProperty
• <Method path={} args={} /> → _.method
• <MethodOf object={} args={} /> → _.methodOf
• <Mixin object={} source={} options={} /> → _.mixin
• <Noop /> → _.noop
• <NthArg n={} /> → _.nthArg
• <Over iteratees={} /> → _.over
• <OverEvery predicates={} /> → _.overEvery
• <OverSome predicates={} /> → _.overSome
• <Property path={} /> → _.property
• <PropertyOf object={} /> → _.propertyOf
• <Range start={} end={} step={} /> → _.range
• <RangeRight start={} end={} step={} /> → _.rangeRight
• <StubArray /> → _.stubArray
• <StubFalse /> → _.stubFalse
• <StubObject /> → _.stubObject
• <StubString /> → _.stubString
• <StubTrue /> → _.stubTrue
• <Times n={} iteratee={} /> → _.times
• <ToPath value={} /> → _.toPath
• <UniqueId prefix={} /> → _.uniqueId

License

MIT

Patreon - Supporters ✨