react-lodash 
Use any lodash function as a React component
Example
Without
import react from 'react' array && arraylength ? <ul> array </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 = ="Empty list" =/>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_ // react-lodash<Get = = />Also every react-lodash component accepts a children render prop:
<Get = => <UpperCase = /></Get>For lodash functions that return a boolean, react-lodash components accept yes and no render props:
<IsEmpty = = =/>Importing
You can either use named imports or individually import components
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 ✨