https://github.com/chantastic/use-lodash

A really terrible React Hook that is illustrative in other ways
https://github.com/chantastic/use-lodash

Last synced: 9 months ago
JSON representation

A really terrible React Hook that is illustrative in other ways

• Host: GitHub
• URL: https://github.com/chantastic/use-lodash
• Owner: chantastic
• License: mit
• Created: 2018-10-29T22:39:43.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-10-29T22:50:47.000Z (over 7 years ago)
• Last Synced: 2025-07-01T05:04:51.523Z (12 months ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 11
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# use-lodash

A really terrible React Hook that is illustrative in other ways

## Don't use this

This is a terrible idea for so many reasons.  

But it's an instructive way to think about custom state Hooks.

## Play

https://codesandbox.io/s/011jx4nyql

## Implementation

```jsx

import React, { useState } from "react";

import lodash from "lodash";

function useLodash(initialSubject) {

  let [subject, updateSubject] = useState(initialSubject);

  let updaters = {};

  Object.keys(lodash.prototype).forEach(

    name =>

      (updaters[name] = (...args) =>

        updateSubject(lodash[name](subject, ...args)))

  );

  return {

    subject,

    ...updaters

  };

}

```

## Usage

You can use any function here: https://lodash.com/docs/4.17.10

Example:

```jsx

import ReactDOM from "react-dom";

function App() {

  let { subject: list, concat, without } = useLodash(["one", "two", "three"]);

  return (

    


      {list.map(item => 
{item}
)}

       concat(["four"])}>

        concat "four"

      

       without("two")}>

        without "two"

      

    

  );

}


const rootElement = document.getElementById("root");

ReactDOM.render(, rootElement);

```