{"id":17982220,"url":"https://github.com/idered/react-preset","last_synced_at":"2025-03-25T19:30:52.699Z","repository":{"id":42846269,"uuid":"262586478","full_name":"Idered/react-preset","owner":"Idered","description":"⚛ Smash your props into single preset prop ","archived":false,"fork":false,"pushed_at":"2023-01-26T19:56:18.000Z","size":324,"stargazers_count":5,"open_issues_count":27,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-20T00:01:59.059Z","etag":null,"topics":["props","react"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-preset-tphq6","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Idered.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}},"created_at":"2020-05-09T14:18:01.000Z","updated_at":"2023-08-05T21:50:22.000Z","dependencies_parsed_at":"2023-02-14T22:46:15.003Z","dependency_job_id":null,"html_url":"https://github.com/Idered/react-preset","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Idered%2Freact-preset","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Idered%2Freact-preset/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Idered%2Freact-preset/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Idered%2Freact-preset/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Idered","download_url":"https://codeload.github.com/Idered/react-preset/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245530058,"owners_count":20630492,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["props","react"],"created_at":"2024-10-29T18:13:29.473Z","updated_at":"2025-03-25T19:30:52.331Z","avatar_url":"https://github.com/Idered.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eReact Preset\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg  alt=\"npm\" src=\"https://img.shields.io/npm/v/react-preset?color=blue\" /\u003e\n  \u003cimg\n    alt=\"npm bundle size\"\n    src=\"https://img.shields.io/bundlephobia/min/react-preset\"\n  /\u003e\n  \u003cimg\n    alt=\"CI\"\n    src=\"https://github.com/Idered/react-preset/workflows/CI/badge.svg?event=push\"\n  /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003eSmash your props into single `preset` prop.\u003cp\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://codesandbox.io/s/react-preset-tphq6\"\n    \u003e\u003cimg\n      alt=\"Edit react-preset\"\n      src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\n  /\u003e\u003c/a\u003e\n\u003cp\u003e\n\n![](.github/example.png)\n\n## Quick start\n\n```sh\nnpm install react-preset\n```\n\n1.  Create preset object and extend TypeScript definitions:\n```tsx\n// preset.tsx\nconst preset = {\n  // Preset group name\n  button: {\n    // Single preset\n    save: {\n      // These props should be handled by component\n      children: 'Save',\n      appearance: 'primary'\n    },\n    cancel: {\n      children: 'Cancel',\n      appearance: 'minimal'\n    }\n  }\n}\n\ndeclare module 'react-preset' {\n  export interface DefaultPreset extends Required\u003ctypeof preset\u003e {}\n}\n\nexport default preset\n```\n\n2. Wrap your App component with preset provider\n```tsx\n// App.tsx\nimport {PresetContext} from 'react-preset'\nimport Button from './Button'\nimport preset from './preset'\n\nconst App = () =\u003e (\n  \u003cPresetContext.Provider value={preset}\u003e\n    \u003cButton preset=\"cancel\" /\u003e\n    \u003cButton preset=\"save\" /\u003e\n  \u003c/PresetContext.Provider\u003e\n);\n```\n\n3. Wrap your component with `withPreset`\n\n```jsx\n// Button.tsx\nimport * as React from 'react'\nimport {withPreset} from 'react-preset'\n\ntype Props = {\n  appearance: 'minimal' | 'primary'\n}\n\nconst Button: React.FC\u003cProps\u003e = (props) =\u003e \u003cbutton {...props}/\u003e\n\nexport default withPreset('button')(Button)\n```\n\n\nCheck [example directory]('./example) to learn more.\n\n\n## API\n\n### `PresetContext`\nUsed to provide presets to components.\n\n```tsx\n\u003cPresetContext.Provider value={preset}\u003e\n  \u003cPage /\u003e\n\u003c/PresetContext.Provider\u003e\n```\n\n### `usePreset`\nHook used to get access to all presets inside component.\n\n```tsx\nconst MyComponent = () =\u003e {\n  const presets = usePreset()\n  // presets.button.save\n}\n```\n\n### `withPreset(groupName)(component)`\nApply preset to component.\n\n```tsx\nconst Card = () =\u003e \u003cdiv {...props} /\u003e\n\nexport default withPreset('card')(Card)\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidered%2Freact-preset","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidered%2Freact-preset","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidered%2Freact-preset/lists"}