Skip to content

Commit

Permalink
prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
overthemike committed Sep 1, 2024
1 parent 4794cfd commit 2c0a01a
Showing 1 changed file with 37 additions and 37 deletions.
74 changes: 37 additions & 37 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,22 +29,22 @@ are welcome and strongly encouraged.
## How to use it

```js
import { schema } from 'valtio-zod'
import { schema } from 'valtio-zod';

const userSchema = z.object({
name: z.string(),
age: z.number()
})
age: z.number(),
});

const userState = schema(userSchema).proxy({
name: 'John Doe',
age: 30
})
age: 30,
});

state.name = 'Jane Doe'
state.name = 'Jane Doe';
// state.name = 'Jane Doe'

state.name = 55 // Error
state.name = 55; // Error
// state.name = 'Jane Doe'
```

Expand All @@ -61,17 +61,17 @@ function that returns a tuple of 2 values.
2. The underlying valtio store. This object is what must be used when using `useSnapshot()` to access the values in the store.

```js
import { schema } from 'valtio-zod'
import { schema } from 'valtio-zod';

const userSchema = z.object({
name: z.string(),
age: z.number()
})
age: z.number(),
});

const userState = schema(userSchema).proxy({
name: 'John Doe',
age: 30
})
age: 30,
});

// state is the proxy, snap is the underlying valtio store. You must use the snap object
// when you use useSnapshot()
Expand All @@ -82,20 +82,20 @@ const userState = schema(userSchema).proxy({
This function takes a store object created by `schema.proxy()` and returns the useSnapshot function from valtio attached to the underlying valtio store.

```js
import { schema, useSnapshot } from 'valtio-zod'
import { schema, useSnapshot } from 'valtio-zod';

const userSchema = z.object({
name: z.string(),
age: z.number()
})
age: z.number(),
});

const userState = schema(userSchema).proxy({
name: 'John Doe',
age: 30
})
age: 30,
});

//... inside a react component
const snap = useSnapshot(userState)
const snap = useSnapshot(userState);
//...
```

Expand All @@ -113,59 +113,59 @@ to configure the default behavior of all schemas that don't provide their own co
#### `parseSafe` example

```js
import { schema } from 'valtio-zod'
import { schema } from 'valtio-zod';

const userSchema = z.object({
name: z.string()
})
name: z.string(),
});

const userState = schema(userSchema).proxy(
{
name: 'John Doe',
age: 30
age: 30,
},
{
parseSafe: true
}
)
parseSafe: true,
},
);

userState.name = 'Jane Doe'
userState.name = 'Jane Doe';
// userState.name = 'Jane Doe'

userState.name = 55 // Error
userState.name = 55; // Error
// this will call the errorHandler function without throwing an error
// userState.name = 'Jane Doe'
```

`parseSafe` is also available as a property on the `vzGlobalConfig` object

```js
import { vzGlobalConfig } from 'valtio-zod'
import { vzGlobalConfig } from 'valtio-zod';

vzGlobalConfig.parseSafe = true
vzGlobalConfig.parseSafe = true;
```

#### `errorHandler` example

This will allow you to use your own error handling logic (or use `Zod.Error`)

```js
import { schema, errorHandler } from 'valtio-zod'
import { schema, errorHandler } from 'valtio-zod';

const userSchema = z.object({
name: z.string(),
age: z.number()
})
age: z.number(),
});

const userState = schema(userSchema).proxy(
{
name: 'John Doe',
age: 30
age: 30,
},
{
errorHandler: (error) => {
console.error(error)
}
}
)
console.error(error);
},
},
);
```

0 comments on commit 2c0a01a

Please sign in to comment.