{"id":31235788,"url":"https://github.com/nitayneeman/react-components-styleguide","last_synced_at":"2026-02-16T17:02:57.274Z","repository":{"id":66229635,"uuid":"401625187","full_name":"nitayneeman/react-components-styleguide","owner":"nitayneeman","description":"An opinionated styleguide concentrating essential props, common behaviors and accessibility guidelines for various components implemented by React.","archived":false,"fork":false,"pushed_at":"2021-09-08T11:55:54.000Z","size":39,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-09-22T15:02:09.322Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"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/nitayneeman.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-08-31T08:16:00.000Z","updated_at":"2021-09-09T07:49:42.000Z","dependencies_parsed_at":"2023-05-03T09:48:08.570Z","dependency_job_id":null,"html_url":"https://github.com/nitayneeman/react-components-styleguide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nitayneeman/react-components-styleguide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitayneeman%2Freact-components-styleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitayneeman%2Freact-components-styleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitayneeman%2Freact-components-styleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitayneeman%2Freact-components-styleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitayneeman","download_url":"https://codeload.github.com/nitayneeman/react-components-styleguide/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitayneeman%2Freact-components-styleguide/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29513435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-16T09:05:14.864Z","status":"ssl_error","status_checked_at":"2026-02-16T08:55:59.364Z","response_time":115,"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":[],"created_at":"2025-09-22T15:00:45.542Z","updated_at":"2026-02-16T17:02:57.269Z","avatar_url":"https://github.com/nitayneeman.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Components Styleguide\n\nAn opinionated styleguide concentrating essential props, common behaviors and accessibility guidelines for various components implemented by React.\n\nThe purpose is to guide developers in a clear and cohesive way when specifying\ndesign systems' components or applicative ones.\n\n⚠️ Although the suggestions below were collected from popular design systems, they are still opinionated. You don't have to completely adhere, but rather consider them.\n\n## Table of Contents\n\n- [🧱 Components](#components)\n  - [Base](#base)\n  - [Buttons](#buttons)\n  - [Inputs](#inputs)\n  - [Modals](#modals)\n  - [Navigation](#navigation)\n- [🖱️ Behaviors](#behaviors)\n  - [Change](#change)\n  - [Click](#click)\n  - [Error](#error)\n  - [Focus](#focus)\n  - [Open](#open)\n\n## 🧱 Components\n\nThis section lists components by familiar categories. Each category specifies likely needed props (that might be inherited from other components or behavior compositions), accessibility guidelines and prominent extensions of this kind of component.\n\n### Base\n\n```tsx\ninterface BaseProps\u003cT\u003e {\n  id?: string;\n  name?: string;\n  className?: string;\n  ref?: React.RefObject\u003cT\u003e;\n  ariaLabel?: string;\n  ariaLabelBy?: string;\n  ariaDescribedBy?: string;\n}\n```\n\n#### Accessability\n\n- Allow the consumer passing `aria-label`, `aria-labeledby` and `aria-describedby` in order to label the element and describe it with extra information.\n\n**[🔝 Back to top](#table-of-contents)**\n\n### Buttons\n\n```tsx\ninterface ButtonProps extends BaseProps\u003cHTMLButtonElement\u003e, ClickProps, FocusProps {\n  children: React.ReactNode;\n  size?: 'small' | 'medium' | 'large';\n  disabled?: boolean;\n  prefix?: React.ReactNode;\n}\n```\n\nExtending: [Base](#base), [Click](#click), [Focus](#focus).\n\n#### Accessability\n\n- When the button isn't implemented using the native `\u003cbutton\u003e` element, `role=\"button\"` is needed.\n- Non-textual buttons (e.g Toggle Button) should have a descriptive title - whether implemented using the native `title` attribute or a custom tooltip.\n\n#### Extensions\n\n##### Toggle Button\n\n```tsx\ninterface ToggleButtonProps extends ButtonProps {\n  title: string;\n  selected?: boolean;\n}\n```\n\n**[🔝 Back to top](#table-of-contents)**\n\n### Inputs\n\n```tsx\ninterface InputProps\u003cT\u003e extends BaseProps\u003cT\u003e, ChangeProps\u003cT\u003e, ErrorProps\u003cT\u003e, FocusProps {\n  value?: any;\n  size?: 'small' | 'medium' | 'large';\n  disabled?: boolean;\n  required?: boolean;\n}\n```\n\nExtending: [Base](#base), [Change](#change), [Error](#error), [Focus](#focus).\n\n#### Accessability\n\n- Text Field must have label associated with the input using a `for` attribute.\n- In case of error validation, `aria-describedby` should be associated with the error message element and `aria-invalid` should be attached to the input element.\n\n#### Extensions\n\n##### Text Field\n\n```tsx\ninterface TextFieldProps extends InputProps\u003cHTMLInputElement\u003e {\n  label: string;\n  placeholder?: string;\n  readOnly?: boolean;\n  minLength?: number;\n  maxLength?: number;\n  autocomplete?: any;\n}\n```\n\n##### Checkbox\n\n```tsx\ninterface CheckboxProps extends InputProps\u003cHTMLInputElement\u003e {\n  checked?: boolean;\n}\n```\n\n##### Radio\n\n```tsx\ninterface RadioProps extends InputProps\u003cHTMLInputElement\u003e {\n  checked?: boolean;\n}\n```\n\n##### Select\n\n```tsx\ninterface SelectProps extends InputProps\u003cHTMLSelectElement\u003e, OpenProps {\n  children: React.ReactNode;\n  placeholder?: string;\n  multiple?: boolean;\n  native?: boolean;\n}\n\ninterface OptionProps extends BaseProps {\n  value: any;\n  children?: React.ReactNode;\n  disabled?: boolean;\n}\n```\n\n**[🔝 Back to top](#table-of-contents)**\n\n### Modals\n\n```tsx\ninterface ModalProps extends BaseProps\u003cHTMLDialogElement\u003e, OpenProps {\n  children: React.ReactNode;\n}\n```\n\nExtending: [Base](#base), [Open](#open).\n\n#### Accessability\n\n- When the modal isn't implemented using the native `\u003cdialog\u003e` element, `role=\"dialog\"` and `aria-modal=\"true\"` are needed.\n- If a close button exits, it should be allowed to pass `aria-label` and `aria-labeledby` from the consumer to that button.\n\n#### Extensions\n\n##### Dialog\n\n```tsx\ninterface DialogProps extends ModalProps {\n  title?: string;\n  actions?: React.ReactNode;\n}\n```\n\n**[🔝 Back to top](#table-of-contents)**\n\n## Navigation\n\n### Link\n\n```tsx\ninterface LinkProps extends BaseProps\u003cHTMLLinkElement\u003e {\n  children: React.ReactNode;\n  href: string;\n  rel?: string;\n  target?: string;\n}\n```\n\nExtending: [Base](#base).\n\n#### Accessability\n\n- Pressing the enter key when the link is focused should activate it.\n\n**[🔝 Back to top](#table-of-contents)**\n\n## 🖱️ Behaviors\n\nThis section lists compositions of common behaviors, so that each behavior consists of several likely needed props and may have public methods.\n\n### Change\n\n```tsx\ninterface ChangeProps\u003cT\u003e {\n  value?: any;\n  onChange?: (event: ChangeEvent\u003cT\u003e) =\u003e void;\n}\n```\n\n**[🔝 Back to top](#table-of-contents)**\n\n### Click\n\n```tsx\ninterface ClickProps {\n  onClick?: React.MouseEventHandler;\n  onDblClick?: React.MouseEventHandler;\n}\n```\n\n**[🔝 Back to top](#table-of-contents)**\n\n### Error\n\n```tsx\ninterface ErrorProps\u003cT\u003e {\n  error?: boolean;\n  errorMessage?: string;\n  onError?: (event: React.SyntheticEvent\u003cT\u003e) =\u003e void;\n}\n```\n\n**[🔝 Back to top](#table-of-contents)**\n\n### Focus\n\n```tsx\ninterface FocusProps\u003cT\u003e {\n  // Consider `autoFocus` carefully - since it may confuse screen readers and real users as well.\n  autoFocus?: boolean;\n  onFocus?: (event: React.FocusEvent) =\u003e void;\n  onBlur?: (event: React.FocusEvent) =\u003e void;\n}\n```\n\n#### Public Methods\n\n```tsx\ninterface FocusMethods {\n  // Sometimes programmatically managing focus is inevitable and necessary.\n  focus: () =\u003e void;\n}\n```\n\n**[🔝 Back to top](#table-of-contents)**\n\n### Open\n\n```tsx\ninterface OpenProps {\n  open?: boolean;\n  onOpen?: () =\u003e void;\n  onClose?: () =\u003e void;\n}\n```\n\n#### Public Methods\n\n```tsx\ninterface OpenMethods {\n  // Apparently most of the time the component will be competently controlled,\n  // but in some cases we might need to open it programmatically.\n  open: () =\u003e void;\n}\n```\n\n**[🔝 Back to top](#table-of-contents)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitayneeman%2Freact-components-styleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitayneeman%2Freact-components-styleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitayneeman%2Freact-components-styleguide/lists"}