Skip to content

Commit

Permalink
Update docs (#2756)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dbritto-dev
dbritto-dev authored Sep 25, 2024
1 parent 8b373dd commit 6b29015
Show file tree
Hide file tree
Showing 4 changed files with 70 additions and 74 deletions.
3 changes: 2 additions & 1 deletion docs/apis/create-with-equality-fn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,8 @@ const useAgeStore = createWithEqualityFn<AgeStore>()(
)

export default function App() {
const [age, setAge] = useAgeStore((state) => [state.age, state.setAge])
const age = useAgeStore((state) => stage.age)
const setAge = useAgeStore((state) => state.setAge)

function increment() {
setAge((currentAge) => currentAge + 1)
Expand Down
3 changes: 2 additions & 1 deletion docs/apis/create.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,8 @@ const useAgeStore = create<AgeStore>()((set) => ({
}))

export default function App() {
const [age, setAge] = useAgeStore((state) => [state.age, state.setAge])
const age = useAgeStore((state) => state.age)
const setAge = useAgeStore((state) => state.setAge)

function increment() {
setAge((currentAge) => currentAge + 1)
Expand Down
72 changes: 38 additions & 34 deletions docs/hooks/use-store-with-equality-fn.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,19 +52,18 @@ store to manage `x` and `y` coordinates and provide an action to update these co
```tsx
import { createStore, useStore } from 'zustand'

type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const positionStore = createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
```
Expand All @@ -74,9 +73,14 @@ will use the store to track and update the dot's position.

```tsx
function MovingDot() {
const [position, setPosition] = useStoreWithEqualityFn(
const position = useStoreWithEqualityFn(
positionStore,
(state) => [{ x: state.x, y: state.y }, state.setPosition],
(state) => state.position,
shallow,
)
const setPosition = useStoreWithEqualityFn(
positionStore,
(state) => state.setPosition,
shallow,
)

Expand Down Expand Up @@ -126,26 +130,30 @@ import { createStore } from 'zustand'
import { useStoreWithEqualityFn } from 'zustand/traditional'
import { shallow } from 'zustand/shallow'

type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const positionStore = createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))

function MovingDot() {
const [position, setPosition] = useStoreWithEqualityFn(
const position = useStoreWithEqualityFn(
positionStore,
(state) => state.position,
shallow,
)
const setPosition = useStoreWithEqualityFn(
positionStore,
(state) => [{ x: state.x, y: state.y }, state.setPosition],
(state) => state.setPosition,
shallow,
)

Expand Down Expand Up @@ -423,20 +431,19 @@ First, let's set up a store that will hold the position of the dot on the screen
store to manage `x` and `y` coordinates and provide an action to update these coordinates.

```tsx
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const createPositionStore = () => {
return createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
}
Expand Down Expand Up @@ -483,9 +490,8 @@ within its container.

```tsx
function MovingDot({ color }: { color: string }) {
const [position, setPosition] = usePositionStore(
(state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
)
const position = usePositionStore((state) => state.position)
const setPosition = usePositionStore((state) => state.setPosition)

return (
<div
Expand Down Expand Up @@ -547,20 +553,19 @@ import { createStore } from 'zustand'
import { useStoreWithEqualityFn } from 'zustand/traditional'
import { shallow } from 'zustand/shallow'

type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const createPositionStore = () => {
return createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
}
Expand Down Expand Up @@ -592,9 +597,8 @@ function usePositionStore<U>(selector: (state: PositionStore) => U) {
}

function MovingDot({ color }: { color: string }) {
const [position, setPosition] = usePositionStore(
(state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
)
const position = usePositionStore((state) => state.position)
const setPosition = usePositionStore((state) => state.setPosition)

return (
<div
Expand Down
66 changes: 28 additions & 38 deletions docs/hooks/use-store.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,18 @@ First, let's set up a store that will hold the position of the dot on the screen
store to manage `x` and `y` coordinates and provide an action to update these coordinates.

```tsx
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const positionStore = createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
```
Expand All @@ -68,10 +67,8 @@ will use the store to track and update the dot's position.

```tsx
function MovingDot() {
const [position, setPosition] = useStore(positionStore, (state) => [
{ x: state.x, y: state.y },
state.setPosition,
])
const position = useStore(positionStore, (state) => state.position)
const setPosition = useStore(positionStore, (state) => state.setPositionStore)

return (
<div
Expand Down Expand Up @@ -117,27 +114,24 @@ Here is what the code should look like:
```tsx
import { createStore, useStore } from 'zustand'

type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const positionStore = createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))

function MovingDot() {
const [position, setPosition] = useStore(positionStore, (state) => [
{ x: state.x, y: state.y },
state.setPosition,
])
const position = useStore(positionStore, (state) => state.position)
const setPosition = useStore(positionStore, (state) => state.setPositionStore)

return (
<div
Expand Down Expand Up @@ -405,20 +399,19 @@ First, let's set up a store that will hold the position of the dot on the screen
store to manage `x` and `y` coordinates and provide an action to update these coordinates.

```tsx
type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const createPositionStore = () => {
return createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
}
Expand Down Expand Up @@ -465,9 +458,8 @@ within its container.

```tsx
function MovingDot({ color }: { color: string }) {
const [position, setPosition] = usePositionStore(
(state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
)
const position = usePositionStore((state) => state.position)
const setPosition = usePositionStore((state) => state.setPosition)

return (
<div
Expand Down Expand Up @@ -527,20 +519,19 @@ Here is what the code should look like:
import { type ReactNode, useState, createContext, useContext } from 'react'
import { createStore, useStore } from 'zustand'

type PositionStoreState = { x: number; y: number }
type PositionStoreState = { position: { x: number; y: number } }

type PositionStoreActions = {
setPosition: (nextPosition: Partial<PositionStoreState>) => void
setPosition: (nextPosition: PositionStoreState['position']) => void
}

type PositionStore = PositionStoreState & PositionStoreActions

const createPositionStore = () => {
return createStore<PositionStore>()((set) => ({
x: 0,
y: 0,
setPosition: (nextPosition) => {
set(nextPosition)
position: { x: 0, y: 0 },
setPosition: (position) => {
set({ position })
},
}))
}
Expand Down Expand Up @@ -572,9 +563,8 @@ function usePositionStore<U>(selector: (state: PositionStore) => U) {
}

function MovingDot({ color }: { color: string }) {
const [position, setPosition] = usePositionStore(
(state) => [{ x: state.x, y: state.y }, state.setPosition] as const,
)
const position = usePositionStore((state) => state.position)
const setPosition = usePositionStore((state) => state.setPosition)

return (
<div
Expand Down

0 comments on commit 6b29015

Please sign in to comment.