{"id":16133764,"url":"https://github.com/urfdvw/react-user-config","last_synced_at":"2026-02-10T10:33:33.151Z","repository":{"id":210128192,"uuid":"725803050","full_name":"urfdvw/react-user-config","owner":"urfdvw","description":"Utilities for setting and using user configurations","archived":false,"fork":false,"pushed_at":"2025-01-19T05:30:27.000Z","size":3580,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-03T00:13:25.966Z","etag":null,"topics":["config","configurations","json-schema","localstorage","react","setting"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-user-config","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/urfdvw.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-30T22:50:05.000Z","updated_at":"2025-01-19T05:30:29.000Z","dependencies_parsed_at":"2024-10-27T18:21:04.272Z","dependency_job_id":"d3a312a5-a869-44c0-9088-0b793d34461b","html_url":"https://github.com/urfdvw/react-user-config","commit_stats":null,"previous_names":["urfdvw/react-localstorage-config"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/urfdvw/react-user-config","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urfdvw%2Freact-user-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urfdvw%2Freact-user-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urfdvw%2Freact-user-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urfdvw%2Freact-user-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/urfdvw","download_url":"https://codeload.github.com/urfdvw/react-user-config/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/urfdvw%2Freact-user-config/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29295346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T03:42:42.660Z","status":"ssl_error","status_checked_at":"2026-02-10T03:42:41.897Z","response_time":65,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["config","configurations","json-schema","localstorage","react","setting"],"created_at":"2024-10-09T22:45:41.199Z","updated_at":"2026-02-10T10:33:33.082Z","avatar_url":"https://github.com/urfdvw.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React User Config\n\nUtilities for setting and using user configurations.\n\n## Install\nFirst make sure peer dependencies are installed\n```\nnpm install \\\n  @mui/icons-material@^5.x \\\n  @mui/material@^5.x \\\n  @emotion/react@^11.x \\\n  @emotion/styled@^11.x\n```\n\nThen install this package.\n```\nnpm i react-user-config\n```\n\n## How to use\n\nPrerequisite: a list of json schema files for user configurations that:\n\n-   all fields have default values.\n-   has a title in the top level\n\nConfiguration json schema example:\n\n```json\n{\n    \"title\": \"Editor\",\n    \"description\": \"Code editor settings.\",\n    \"type\": \"object\",\n    \"properties\": {\n        \"font\": {\n            \"title\": \"Text font size\",\n            \"type\": \"number\",\n            \"default\": 14\n        }\n    }\n}\n```\n\nCode example:\n\n```js\nimport { useConfig, ConfigForms } from \"react-user-config\";\nimport schema from \"./schema.json\"; // import json schema of configurations\n\nfunction App() {\n    const schemas = [schema];\n    const { config, setConfig, ready } = useConfig(schemas);\n\n    // If initialization not done, don't continue.\n    if (!ready) {\n        return;\n    }\n\n    // Checking the configurations\n    console.log(config);\n\n    return (\n        \u003c\u003e\n            {/* The Component used for setting the configurations */}\n            \u003cConfigForms schemas={schemas} config={config} setConfig={setConfig} /\u003e\n        \u003c/\u003e\n    );\n}\n```\n- `useConfig`: hook dealing with configuration storying, changing and reading logic.\n    - `config`: the configuration object.\n    - `ready`: when this indicator is true, the initialization steps are done.\n        - before that, the `config` is either `{}` or not reflecting the saved configurations.\n    - `setConfig`: \n        - set part of the configuration by a specific schema name and an configuration json object of that schema.\n        - this function is supposed to be used only in `ConfigForms` component.\n- `ConfigForms`: component for configuration viewing and changing.\n    - `schemas`: list of json schemas.\n        - each schema is one section of the configuration, which is shown as a tab in the UI.\n    - `config`: the configuration object from `useConfig` hook.\n    - `setConfig`: the configuration setting function from `useConfig` hook.\n\n## Demo\n\nhttps://urfdvw.github.io/react-user-config/\n\nPlease check the \"demo\" branch for demo source code.\n\n*In this demo `react-lazy-dark-theme` is used for changing the page theme.*\n\n## Planned features\n\n- Save/Load config to local file handle.\n- Import/Export config as file.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Furfdvw%2Freact-user-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Furfdvw%2Freact-user-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Furfdvw%2Freact-user-config/lists"}