https://github.com/tom-sherman/use-automerge

Use automerge with React hooks
https://github.com/tom-sherman/use-automerge

Last synced: 14 days ago
JSON representation

Use automerge with React hooks

• Host: GitHub
• URL: https://github.com/tom-sherman/use-automerge
• Owner: tom-sherman
• Created: 2020-04-14T23:51:19.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T03:26:52.000Z (almost 2 years ago)
• Last Synced: 2023-03-02T21:12:38.845Z (almost 2 years ago)
• Language: TypeScript
• Size: 1.43 MB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 13
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# use-automerge

A hook manage state using [automerge](https://github.com/automerge/automerge) in a React hook.

## API

### `useAutomerge`

`useAutomerge(initialState)` is similar to [React.useState](https://reactjs.org/docs/hooks-state.html). The function returns a tuple, the first value of the tuple is the current state, the second is the updater function, which accepts an Automerge change function where the draft document can be mutated freely.

```javascript

import React from 'react';

import { useAutomerge } from 'use-automerge';

function App() {

  const [doc, updateDoc] = useAutomerge({

    name: 'Michel',

    age: 33,

  });

  function updateName(name) {

    updateDoc((draft) => {

      draft.name = name;

    });

  }

  function becomeOlder() {

    updateDoc((draft) => {

      draft.age++;

    });

  }

  return (

    


      


        Hello {person.name} ({person.age})

      

       {

          updateName(e.target.value);

        }}

        value={person.name}

      />

      


      Older

    

  );

}

```


## Prior art

This project was heavily inspired by [user-immer](https://github.com/immerjs/use-immer).