react-lodash

Lodash as React components

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-lodash
35420.1.25 years ago5 years agoMinified + gzip package size for react-lodash in KB

Popular Searches

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

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

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

License

MIT
Patreon - Supporters ✨