Use any lodash function as a React component
import react from 'react'
array && array.length ? (
<ul>
{array.map(i => (
<li key={i}>{i}</li>
))}
</ul>
) : (
'Empty list'
)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>
)}
/>You can play with react-lodash on CodeSandbox
npm install react-lodash
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.
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 :)
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>}
/>You can either use named imports or individually import components
import { IsEmpty } from 'react-lodash'import IsEmpty from 'react-lodash/lib/IsEmpty'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 ;)
<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
<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
<Now />→ _.now
<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
<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
<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
<Clamp number={} lower={} upper={} />→ _.clamp<InRange number={} start={} end={} />→ _.inRange<Random lower={} upper={} floating={} />→ _.random
<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
<Chain value={} />→ _.chain<Tap value={} interceptor={} />→ _.tap<Thru value={} interceptor={} />→ _.thru
<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
<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
MIT
Patreon - Supporters ✨