Skip to content

typicode/react-lodash

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

45 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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 play with react-lodash on CodeSandbox

Edit react-lodash-example

Install

npm install react-lodash

Introduction

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

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 ✨

About

βš›οΈ πŸ”§ Lodash as React components

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published