Skip to content

Commit 141381f

Browse files
committed
docs: finalize initial README
1 parent 804697d commit 141381f

File tree

1 file changed

+51
-2
lines changed

1 file changed

+51
-2
lines changed

README.md

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,58 @@ pnpm add @joeyfigaro/use-mutation-redirect
1010
yarn add @joeyfigaro/use-mutation-redirect
1111
```
1212

13-
## Examples
13+
## Requirements
1414

15-
N/A (soon)
15+
- `react` + `react-dom` `v18.*`
16+
- `@tanstack/react-query` `v5.*` (created using v5.69.0)
17+
18+
I plan to offer support for older versions of React and RQ (TQ?)
19+
20+
## Quickstart
21+
22+
1. import `useMutationRedirect`
23+
2. use it in place of `useMutation`
24+
3. provide options for `useMutation` as the first argument, and `UseMutationRedirectOptions` as the second
25+
26+
```tsx
27+
import { useState } from 'react';
28+
import { useMutationRedirect } from '@joeyfigaro/use-mutation-redirect';
29+
import { useNavigate } from 'react-router-dom';
30+
31+
const Login = () => {
32+
const [username, setUsername] = useState();
33+
const [password, setPassword] = useState();
34+
const navigate = useNavigate();
35+
const authenticate = useMutationRedirect(
36+
{
37+
mutationFn: async () => {
38+
try {
39+
// handle your fetching...
40+
} catch (error) {
41+
throw new AuthenticationError(error);
42+
}
43+
},
44+
retry: 3,
45+
},
46+
{
47+
to: '/forgot-password',
48+
navigateFn: navigate,
49+
// redirect user to forgot password view if a mutation fails 3 times
50+
trigger: (mutation) => mutation.isError && mutation.failureCount >= 3,
51+
},
52+
);
53+
54+
return (
55+
<button onClick={() => authenticate.mutate({ username, password })}>
56+
Authenticate
57+
</button>
58+
);
59+
};
60+
```
61+
62+
## Why?
63+
64+
I got tired of rewriting the same post-mutation redirect logic over and over and over.
1665

1766
## License
1867

0 commit comments

Comments
 (0)