{"id":14982004,"url":"https://github.com/springload/react-patterns","last_synced_at":"2025-04-15T02:28:36.458Z","repository":{"id":57342321,"uuid":"144092313","full_name":"springload/react-patterns","owner":"springload","description":"A pattern library designed to be easier to maintain","archived":false,"fork":false,"pushed_at":"2018-08-10T07:20:42.000Z","size":350,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":19,"default_branch":"master","last_synced_at":"2025-03-28T14:11:54.713Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://springload.github.io/react-patterns/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/springload.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-09T02:40:58.000Z","updated_at":"2022-10-15T15:58:01.000Z","dependencies_parsed_at":"2022-09-16T02:50:41.367Z","dependency_job_id":null,"html_url":"https://github.com/springload/react-patterns","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-patterns","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-patterns/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-patterns/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/springload%2Freact-patterns/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/springload","download_url":"https://codeload.github.com/springload/react-patterns/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248993386,"owners_count":21195192,"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":[],"created_at":"2024-09-24T14:04:38.204Z","updated_at":"2025-04-15T02:28:36.434Z","avatar_url":"https://github.com/springload.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"245\" height=\"378\" src=\"/logo.png\" alt=\"React Patterns\"\u003e\u003cbr\u003e\n  \u003ci\u003eA pattern library system designed to be easier to maintain\u003c/i\u003e\n\u003c/p\u003e\n\n# Install\n\n    npm install react-patterns\n\n    yarn add react-patterns\n\n# What is a Pattern Library?\n\nA pattern library (part of a Style Guide or a Design System), is a way of documenting usage of components and how they're made with HTML, CSS, and other assets.\n\nHaving this documented can help siloed teams or different vendors coordinate to achieve design consistency.\n\n## What is React-Patterns?\n\nA component that autodetects the HTML and CSS of your components, and provides a download cart.\n\n## How can I make a pattern library with React-Patterns?\n\nOne of the advantages of react-patterns is that it detects the CSS Rules being applied, so you can put your production site's CSS files on the page and write HTML that uses them and react-patterns will only display the relevant CSS. This means that a lot less effort to repurpose your existing CSS as a pattern library.\n\nUsage:\n\n```javascript\nimport React from \"react\";\nimport Pattern from \"react-patterns\";\nimport \"h6.css\"; // contains h6 { color: red; }\n\nexport default () =\u003e (\n  \u003cPattern\u003e\n    \u003ch6\u003eMy Heading 6\u003c/h6\u003e\n  \u003c/Pattern\u003e\n);\n```\n\nWill render as\n\n\u003cblockquote\u003e\u003ch6\u003eMy Heading 6\u003c/h6\u003e\u003cdetails\u003e\u003csummary\u003eHTML\u003c/summary\u003e\u0026lt;h6\u0026gt;My Heading 6\u0026lt;/h6\u0026gt;\u003c/details\u003e\u003cdetails\u003e\u003csummary\u003eCSS\u003c/summary\u003eh6 { color: red; }\u003c/details\u003e\u003c/div\u003e\u003c/blockquote\u003e\n\n### Syntax Highlighting\n\nUse `react-patterns/theme/solarize.css`.\n\n## Demo\n\n[LIC Pattern Library](https://springload.github.io/lic-pattern-library/)\n\n## This is a pattern library so where's the dev webserver?\n\nGreat question.\n\n`react-patterns` doesn't include a dev server because other projects do it better.\n\nSo instead just use \u003ca href=\"https://github.com/facebookincubator/create-react-app\"\u003eCreate-React-App\u003c/a\u003e or, add `\u003cPattern\u003e` tags to a new route in your existing app, or use whatever boilerplate you like.\n\n## How does react-patterns organise the page of patterns... with headings, accordions, tabs, or what?\n\nHere's a hypothetical... if your pattern library had 5 components then it probably should be organised quite differently to another library with 1000 components, so this software is intentionally unopinionated about the presentation of your components. react-patterns just tries to do one thing well -- rendering the component preview. Decide for yourself how to organise them (do try \u003ca href=\"https://github.com/springload/react-accessible-accordion/\"\u003e`react-accessible-accordion`\u003c/a\u003e though!).\n\n## Features\n\n\u003cul\u003e\n \u003cli\u003e [x] Minimal\n \u003cli\u003e [x] React\n \u003cli\u003e [x] CSS Rule Autodetection, so there's no need to manually associate CSS with a component\n \u003cli\u003e [x] ZIP download of particular components\n \u003cli\u003e [x] HTML beautifier\n \u003cli\u003e [x] CSS beautifier\n \u003cli\u003e [x] CSS rule whitelist and blacklist. Pass in 'blacklist' prop with value of 'stylesheet' to string match against attributes of `\u0026lt;link\u0026gt;` or `\u0026lt;style\u0026gt;`, 'stylesheets' to pass in an array of those, or 'rule' to match against selectors, or rules for an array of those.\n \u003cli\u003e [x] CSS Rule whitelist (probably only useful to opt-in specific stylesheets while ignoring others)\n \u003cli\u003e [x] Render prop overrides for HTML and CSS\n\u003c/ul\u003e\n\n## Props\n\nThe only requirement is a wrapped `children` node. All other props are optional.\n\n\u003ctable\u003e\n\u003ctr\u003e\u003cth\u003enoCart\u003c/th\u003e\u003ctd\u003eDisable cart\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003cth\u003efilename\u003c/th\u003e\u003ctd\u003eChoose the cart ZIP filename for the HTML\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003cth\u003eblacklist\u003c/th\u003e\u003ctd\u003eA blacklist of types of CSS to include. An Object or an array of Objects like \u003ccode\u003e{ stylesheet: 'substring', rule: 'substring', media: 'substring' }\u003c/code\u003e. Use this to exclude certain CSS.\u003c/td\u003e\u003c/tr\u003e\n\u003ctr\u003e\u003cth\u003ewhitelist\u003c/th\u003e\u003ctd\u003eA whitelist of types of CSS to include. An Object or an array of Objects like \u003ccode\u003e{ stylesheet: 'substring', rule: 'substring', media: 'substring' }\u003c/code\u003e. Use this to include certain CSS.\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003cth colspan=\"2\"\u003eRender props\u003c/th\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003cth\u003erenderChildren\u003c/th\u003e\u003ctd\u003eA render prop to wrap `children` prop\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003cth\u003erenderHTML\u003c/th\u003e\u003ctd\u003eA render prop to wrap autodetected HTML.\u003c/td\u003e\u003c/tr\u003e\n \u003ctr\u003e\u003cth\u003erenderCSS\u003c/th\u003e\u003ctd\u003eA render prop to wrap autodetected CSS.\u003c/td\u003e\u003c/tr\u003e\n\u003c/table\u003e\n\n## Roadmap\n\n\u003cul\u003e\n  \u003cli\u003e [ ] ...and show prop types, somehow? (`prop-types` or Flow/TS?). Sadly I'm not sure how we could support FlowType/TypeScript types because those are removed at compile-time.\n \u003cli\u003e [ ] Detect basic JSX React Components... this is almost working\n \u003cli\u003e [ ] Make it support interactive components (eg accumulating CSS across these multiple states).\n  \u003cli\u003e [ ] Parse SourceMaps to derive Sass (etc) if possible.\n\u003c/ul\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Freact-patterns","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspringload%2Freact-patterns","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspringload%2Freact-patterns/lists"}