Naivete Precedes Misrepresentation

    react-lodash

    0.1.2 • Public • Published

    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

    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

    Keywords

    none

    Install

    npm i react-lodash

    DownloadsWeekly Downloads

    1,731

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    348 kB

    Total Files

    610

    Last publish

    Collaborators

    • typicode