https://github.com/urfdvw/react-user-config
Utilities for setting and using user configurations
https://github.com/urfdvw/react-user-config
config configurations json-schema localstorage react setting
Last synced: 3 months ago
JSON representation
Utilities for setting and using user configurations
- Host: GitHub
- URL: https://github.com/urfdvw/react-user-config
- Owner: urfdvw
- License: apache-2.0
- Created: 2023-11-30T22:50:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-19T05:30:27.000Z (6 months ago)
- Last Synced: 2025-03-08T09:02:17.601Z (4 months ago)
- Topics: config, configurations, json-schema, localstorage, react, setting
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-user-config
- Size: 3.41 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React User Config
Utilities for setting and using user configurations.
## Install
First make sure peer dependencies are installed
```
npm install \
@mui/icons-material@^5.x \
@mui/material@^5.x \
@emotion/react@^11.x \
@emotion/styled@^11.x
```
Then install this package.
```
npm i react-user-config
```
## How to use
Prerequisite: a list of json schema files for user configurations that:
- all fields have default values.
- has a title in the top level
Configuration json schema example:
```json
{
"title": "Editor",
"description": "Code editor settings.",
"type": "object",
"properties": {
"font": {
"title": "Text font size",
"type": "number",
"default": 14
}
}
}
```
Code example:
```js
import { useConfig, ConfigForms } from "react-user-config";
import schema from "./schema.json"; // import json schema of configurations
function App() {
const schemas = [schema];
const { config, setConfig, ready } = useConfig(schemas);
// If initialization not done, don't continue.
if (!ready) {
return;
}
// Checking the configurations
console.log(config);
return (
<>
{/* The Component used for setting the configurations */}
>
);
}
```
- `useConfig`: hook dealing with configuration storying, changing and reading logic.
- `config`: the configuration object.
- `ready`: when this indicator is true, the initialization steps are done.
- before that, the `config` is either `{}` or not reflecting the saved configurations.
- `setConfig`:
- set part of the configuration by a specific schema name and an configuration json object of that schema.
- this function is supposed to be used only in `ConfigForms` component.
- `ConfigForms`: component for configuration viewing and changing.
- `schemas`: list of json schemas.
- each schema is one section of the configuration, which is shown as a tab in the UI.
- `config`: the configuration object from `useConfig` hook.
- `setConfig`: the configuration setting function from `useConfig` hook.
## Demo
https://urfdvw.github.io/react-user-config/
Please check the "demo" branch for demo source code.
*In this demo `react-lazy-dark-theme` is used for changing the page theme.*
## Planned features
- Save/Load config to local file handle.
- Import/Export config as file.