@ptolemy2002/react-search-param-state
v1.0.1
Published
Example of a React library
Downloads
65
Readme
React Search Param State
This library works with react-router-dom
to provide a hook that allows you to store and retrieve state in the URL search parameters, allowing users to share links with the state included and to refresh the page without losing the state.
The hook is exported as default, so you can import in one of the following ways:
// ES6
import useSearchParamState from '@ptolemy2002/react-search-param-state';
// CommonJS
const useSearchParamState = require('@ptolemy2002/react-search-param-state');
Hooks
The following hooks are available in the library:
useSearchParamState
Description
With your specified defaultVaues
, retrieve state from the URL parameters, converting values as specified. The hook will return with a funtion that can be used to update the state. Note that the setter will not work with any variable that was not speified in the defaultValues
object.
Parameters
defaultValues
(Object): An object containing the default values for the state. The keys are the names of the state variables, and the values are the default values. The values can be any type, but they will be converted to strings when stored in the URL.convert
(Object): An object containing functions to convert the values from strings to the desired type. The first parameter will be the name of the variable this value belongs to, and the second parameter will be the string value to convert. The function should return the converted value. If this is not specified, all vales are used as-is.
Returns
Array
: An array containing the following values:state
(Object): An object containing the current state values.setState
(Function): A function that can be used to update the state. You can specify a callable as either the parameter itself or one of the values, in both cases the curret value of the state/variable will be passed as a parameter to the callable. Any variables that do not appear in the object passed to the function will be left unchanged.
Meta
This is a React Library Created by Ptolemy2002's cra-template-react-library template in combination with create-react-app. It contains methods of building and publishing your library to npm. For now, the library makes use of React 18 and does not use TypeScript.
Peer Dependencies
These should be installed in order to use the library, as npm does not automatically add peer dependencies to your project.
- @types/react: ^18.3.3
- @types/react-dom: ^18.3.0
- react: ^18.3.1
- react-dom: ^18.3.1
- react-router-dom: ^6.26.2
Commands
The following commands exist in the project:
npm run uninstall
- Uninstalls all dependencies for the librarynpm run reinstall
- Uninstalls and then Reinstalls all dependencies for the librarynpm run example-uninstall
- Uninstalls all dependencies for the example appnpm run example-install
- Installs all dependencies for the example appnpm run example-reinstall
- Uninstalls and then Reinstalls all dependencies for the example appnpm run example-start
- Starts the example app after building the librarynpm run build
- Builds the librarynpm run release
- Publishes the library to npm without changing the versionnpm run release-patch
- Publishes the library to npm with a patch version bumpnpm run release-minor
- Publishes the library to npm with a minor version bumpnpm run release-major
- Publishes the library to npm with a major version bump