Skip to content

Commit

Permalink
update readme
Browse files Browse the repository at this point in the history
  • Loading branch information
dai-shi committed Apr 18, 2021
1 parent 8372dd6 commit c283923
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 6 deletions.
12 changes: 6 additions & 6 deletions docs/advanced-recipes/large-objects.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Large objects
# Large Objects

> All of the examples and descriptions below are based on this [codesandbox](https://codesandbox.io/s/zealous-sun-f2qnl?file=/src/App.tsx), so it will give you a better understanding if you check it out along these examples.
Expand Down Expand Up @@ -43,8 +43,8 @@ const initialData = {
We use this utility to focus an atom and create an atom of a specific part of the data. For example we may need to consume the people property of the above data, Here's how we do it.

```jsx
import { atom } from "jotai";
import { focusAtom } from "jotai/optics";
import { atom } from 'jotai'
import { focusAtom } from 'jotai/optics'

const dataAtom = atom(initialData)

Expand All @@ -62,7 +62,7 @@ If we change the `film` property of the above data example, the `peopleAtom` won
We use this utility for atoms that return arrays as their values, for example the `peopleAtom` we made above returns the people property array, so we can return an atom for each item of that array. If the array atom is writable, `splitAtom` returned atoms are going to be writable, if the array atom is read-only, items atoms are going to be read-only too.

```jsx
import { splitAtom } from "jotai/utils";
import { splitAtom } from 'jotai/utils'

const peopleAtomsAtom = splitAtom(peopleAtom)
```
Expand Down Expand Up @@ -98,8 +98,8 @@ const readOnlyInfoAtom = atom((get) => get(dataAtom).info)
Then we can going to consume it in our component:

```jsx
import { atom, useAtom } from "jotai";
import { selectAtom, splitAtom } from "jotai/utils";
import { atom, useAtom } from 'jotai'
import { selectAtom, splitAtom } from 'jotai/utils'

const Tags: React.FC = () => {
const tagsAtom = selectAtom(readOnlyInfoAtom, (s) => s.tags)
Expand Down
2 changes: 2 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -193,3 +193,5 @@ yarn add jotai react
- [Valtio](./docs/api/valtio.md) ([valtio](https://github.com/pmndrs/valtio) integration)
- [Zustand](./docs/api/zustand.md) ([zustand](https://github.com/pmndrs/zustand) integration)
- [Redux](./docs/api/redux.md) ([redux](https://github.com/reduxjs/redux) integration)
- Advanced Recipes
- [Large Objects](./docs/advanced-recipes/large-objects.md)

0 comments on commit c283923

Please sign in to comment.