All Projects โ†’ typicode โ†’ React Lodash

typicode / React Lodash

Licence: mit
โš›๏ธ ๐Ÿ”ง Lodash as React components

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Lodash

Pydash
The kitchen sink of Python utility libraries for doing "stuff" in a functional way. Based on the Lo-Dash Javascript library.
Stars: โœญ 728 (+137.91%)
Mutual labels:  utility, lodash
Lodash Php
Easy to use utility functions for everyday PHP projects. This is a port of the Lodash JS library to PHP
Stars: โœญ 412 (+34.64%)
Mutual labels:  utility, lodash
Smoldash
Smoldash, A tiny lodash alternative built for the modern web
Stars: โœญ 66 (-78.43%)
Mutual labels:  utility, lodash
Rationale
Ramda inspired library of helper functions for ReasonML
Stars: โœญ 275 (-10.13%)
Mutual labels:  utility, lodash
rudash
Rudash - Lodash for Ruby Apps
Stars: โœญ 27 (-91.18%)
Mutual labels:  utility, lodash
FSMon
File system monitoring utility written in plain PHP
Stars: โœญ 12 (-96.08%)
Mutual labels:  utility
Nomino
Batch rename utility for developers
Stars: โœญ 282 (-7.84%)
Mutual labels:  utility
thanosjs
Node.js implementation of Thanos JS website.
Stars: โœญ 34 (-88.89%)
Mutual labels:  utility
tiny-zip
The missing Zip library for Java
Stars: โœญ 18 (-94.12%)
Mutual labels:  utility
Cryptocmd
Cryptocurrency historical price data library in Python. Data from https://coinmarketcap.com.
Stars: โœญ 299 (-2.29%)
Mutual labels:  utility
Extramaputils
๐ŸŒ the simple utility for google maps in android
Stars: โœญ 293 (-4.25%)
Mutual labels:  utility
Gulp Template
Render/precompile Lodash templates
Stars: โœญ 276 (-9.8%)
Mutual labels:  lodash
absurdum
The Ridiculous Application of Reduce
Stars: โœญ 61 (-80.07%)
Mutual labels:  lodash
Tooltip Sequence
A simple step by step tooltip helper for any site
Stars: โœญ 287 (-6.21%)
Mutual labels:  utility
excel2xx
ๅฏผๅ‡บ Excel ๅˆฐ็ป“ๆž„ๅŒ–ๆ•ฐๆฎๆˆ–ไปฃ็  ( lua, c/c++, go ็ญ‰็ญ‰็”ฑไฝ ็š„ mako ๆจกๆฟๅ†ณๅฎš )
Stars: โœญ 14 (-95.42%)
Mutual labels:  utility
Cypress Vue Unit Test
A little helper to unit test Vue components in the Cypress.io E2E test runner
Stars: โœญ 298 (-2.61%)
Mutual labels:  utility
glitter
Display git status information in your shell prompt
Stars: โœญ 47 (-84.64%)
Mutual labels:  utility
Length.js
๐Ÿ“ JavaScript library for length units conversion.
Stars: โœญ 292 (-4.58%)
Mutual labels:  utility
Eustia
Tool for generating utility libraries
Stars: โœญ 276 (-9.8%)
Mutual labels:  utility
Promise Utils
Lodash-like, dependency-free utilities for native ES6 promises.
Stars: โœญ 268 (-12.42%)
Mutual labels:  lodash

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

  • <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 โœจ

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].