add support for Query Params #39
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
|
Can you add a description about motivation, use cases, implementation approach, and so forth? |
This comment was marked as duplicate.
This comment was marked as duplicate.
|
Re: #39 (comment) Thanks. Can you also put them in the first commend of this PR? My little concern is that the implementation is on top of I think to avoid confusion with #20, we should probably rename |
|
I’ve added them to the first comment of the PR. Renaming atomWithQueryParams to atomWithSearchParams avoids confusion with #20 and keeps things clear. Thanks! |
| * @param defaultValue - The default value of the search parameter. | ||
| * @returns A writable atom that manages the search parameter. | ||
| */ | ||
| export const atomWithSearchParams = <T>( |
There was a problem hiding this comment.
Alright, then limit only to support string, number and boolean.
| export const atomWithSearchParams = <T>( | |
| export const atomWithSearchParams = <T extends string | number | boolean>( |
and simply the code please?
|
|
||
| // Determine the type of the default value and parse accordingly. | ||
| if (typeof defaultValue === 'number') { | ||
| return Number(value) as T; |
There was a problem hiding this comment.
Check NaN and return defaultValue instead.
There was a problem hiding this comment.
NaN checking is not enough for '' case.
> Number('')
0| } | ||
|
|
||
| if (typeof defaultValue === 'string') { | ||
| return value as T; |
There was a problem hiding this comment.
Check typeof string and return defaultValue otherwise.
| } | ||
|
|
||
| // If the default value is an object, try to parse it as JSON. | ||
| return JSON.parse(value) as T; |
There was a problem hiding this comment.
Just throw here.
throw new Error('unsupported value type');
| } | ||
|
|
||
| if (typeof defaultValue === 'boolean') { | ||
| return (value === 'true') as T; |
There was a problem hiding this comment.
Return the default value if it's not true or false.
Motivation:
Recoil is no longer actively maintained, and I have recently transitioned to using Jotai. I needed a solution for URL persistence with query parameters similar to what recoil-sync provides, so I implemented this feature in Jotai.
Use cases:
I’ve included a simple example under the examples/05_search_params, which demonstrates how to use the new functionality:
This will result in a URL like:
?key=defaultValue.Implementation approach:
The implementation builds on Jotai's
atomWithLocationfrom the jotai-location library, combined with Jotai’s basic read-write derived atoms to manage the state and sync it with URL query parameters.