{"id":19472010,"url":"https://github.com/uswitch/ustyle-react","last_synced_at":"2025-04-25T12:31:14.266Z","repository":{"id":19507795,"uuid":"87201293","full_name":"uswitch/ustyle-react","owner":"uswitch","description":"uStyle + React for the people.","archived":false,"fork":false,"pushed_at":"2023-10-26T21:04:57.000Z","size":1876,"stargazers_count":7,"open_issues_count":28,"forks_count":0,"subscribers_count":32,"default_branch":"master","last_synced_at":"2024-04-15T13:27:47.126Z","etag":null,"topics":["javascript","nodejs","react","ustyle"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uswitch.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":"2017-04-04T15:09:39.000Z","updated_at":"2022-05-19T13:10:47.000Z","dependencies_parsed_at":"2024-11-10T19:11:52.622Z","dependency_job_id":null,"html_url":"https://github.com/uswitch/ustyle-react","commit_stats":{"total_commits":178,"total_committers":22,"mean_commits":8.090909090909092,"dds":0.5786516853932584,"last_synced_commit":"767bc33de8fc0098d13bd31b0efc21d6a3a38b33"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uswitch%2Fustyle-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uswitch%2Fustyle-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uswitch%2Fustyle-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uswitch%2Fustyle-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uswitch","download_url":"https://codeload.github.com/uswitch/ustyle-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250817586,"owners_count":21492178,"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":["javascript","nodejs","react","ustyle"],"created_at":"2024-11-10T19:11:45.617Z","updated_at":"2025-04-25T12:31:13.228Z","avatar_url":"https://github.com/uswitch.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ustyle-react\n\nA collection of React components implementing the uSwitch style guide, [uStyle](https://ustyle.guide/).\n\n## Installation\n\nFirst, install the package:\n\n```bash\nnpm i @uswitch/ustyle-react\n```\n\nCongratulations! You can now import `ustyle-react` components like so:\n\n```js\nimport {Button} from '@uswitch/ustyle-react';\n\n// Do things with your button here...\n```\n\n## Development\n\n**Note: you should use the npm 5 cli to add dependencies in order to keep `package-lock.json` up to date**\n\nFirst, clone the project and install the dependencies:\n\n```bash\ngit clone https://github.com/uswitch/ustyle-react\ncd ustyle-react \u0026\u0026 npm install\n```\n\nTo start the development server (on port 9000) run:\n\n```bash\nnpm start\n```\n\nSince the project is written in ES2015+, the `src` code will need to built when you commit.\nLuckily, we have a pre-commit hook that builds the code for you before every commit!\n\nTo run the build step manually:\n\n```bash\nnpm run build\n```\n\n## Components\n\nBelow are a list of components, with some guidance of how to use them.\n\n### Button [→](https://ustyle.guide/pattern-library/components.html#buttons)\n\nExample:\n\n```js\nimport {Button} from '@uswitch/ustyle-react';\n\n\u003cButton size='large' variant='primary' blocked /\u003e\n```\n\nProps:\n\n- `variant` [string] - options: primary, action, secondary, hero, reversed\n- `size` [string] - options: large, small\n- `href` [string] - if set, will return an anchor tag instead of a button\n- `size` [boolean]\n- `blocked` [boolean]\n- `link` [boolean]\n- `stronger` [boolean]\n- `onClick` [function] - called when the button is clicked\n\n\n### Breadcrumbs [→](https://ustyle.guide/pattern-library/components.html#breadcrumbs)\n\nExample:\n\n```js\nimport {Breadcrumbs} from '@uswitch/ustyle-react';\n\nconst items = [{\n  href: '/',\n  text: 'uSwitch.com'\n}, {\n  href: null, // NOTE: optional; not used\n  text: 'Statutory credit reports'\n}];\n\nconst onClick = (e) =\u003e e.preventDefault();\n\n\u003cBreadcrumbs items={items} onClick={onClick} /\u003e\n```\n\nProps:\n\n- `items` [array:objects]\n  - `href` [string]\n  - `text` [string/node]\n- `onClick` [function] - called when a breadcrumb is clicked\n\n\n### ProgressNavigation [→](https://ustyle.guide/pattern-library/components.html#progress_navigation)\n\nExample:\n\n```js\nimport {ProgressNavigation} from '@uswitch/ustyle-react';\n\nconst items = [{\n  href: '/journey/step-1',\n  text: 'Step 1'\n}, {\n  href: '/journey/step-2', // NOTE: optional; not used\n  text: 'Step 2',\n  current: true\n}, {\n  href: '/journey/step-3', // NOTE: optional; not used\n  text: 'Step 3'\n}];\n\nconst onClick = (e, item) =\u003e e.preventDefault();\n\n\u003cProgressNavigation items={items} onClick={onClick} /\u003e\n```\n\nProps:\n\n- `items` [array:objects]\n  - `href` [string] - only required for completed steps\n  - `text` [string/node]\n  - `current` [boolean] - the step that the user is currently on\n- `onClick` [function] - called when a navigation link is clicked\n\n### USP [→](https://ustyle.guide/pattern-library/components.html#usps)\n\nExample:\n\n```js\nimport {USP} from '@uswitch/ustyle-react';\n\n\u003cUSP color='red' text='Example USP' annotation='More info goes here...' /\u003e\n```\n\nProps:\n\n- `text` [string:required] - the main USP text\n- `annotation` [string]\n- `color` [string] - options: blue, orange, purple, yellow, typecyan, green, navy, cyan, typegrey, red\n\n### Loader [→](https://ustyle.guide/pattern-library/components.html#loader)\n\nExample:\n\n```js\nimport {Loader} from '@uswitch/ustyle-react';\n\nlet isLoading = true;\n\nsetTimeout(() =\u003e isLoading = false, 10000);\n\n\u003cdiv\u003e{ isLoading ? \u003cLoader text='Loading...' /\u003e : null }\u003c/div\u003e\n```\n\n### LoaderContainer [→](https://ustyle.guide/pattern-library/components.html#loader)\n\nExample:\n\n```js\nimport {LoaderContainer} from '@uswitch/ustyle-react';\n\nlet isLoading = true;\n\nsetTimeout(() =\u003e isLoading = false, 10000);\n\n\u003cLoaderContainer text='Loading...' isLoading={isLoading}\u003e\n  \u003cul className='us-list'\u003e\n    \u003cli\u003e\u003ca href='#'\u003eList item 1\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href='#'\u003eList item 2\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href='#'\u003eList item 3\u003c/a\u003e\u003c/li\u003e\n    \u003cli\u003e\u003ca href='#'\u003eList item 4\u003c/a\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/LoaderContainer\u003e\n```\n\nProps:\n\n- `text` [string] - displayed under the loading spinner\n- `isLoading` [boolean]\n- `children` [nodes]\n\n### Icons [→](https://ustyle.guide/design/icons.html)\n\nExample:\n\n```js\nimport {Icon} from '@uswitch/ustyle-react';\n\n\u003cIcon name='google' color='typecyan' size='large' /\u003e\n```\n\nProps:\n\n- `name` [string] - displayed under the loading spinner\n- `color` [string] - options: white, typegrey, inputgrey, typecyan, custom\n- `size` [string] options: small, medium, large\n- `sizeTablet` [string] - maps to `.us-icon--{sizeTablet}--sm-tablet`\n- `sizeMobile` [string] - maps to `.us-icon--{sizeMobile}--mobile`\n- `noText` [boolean]\n- `iconPath` [string] - default `/icons.svg`, the path where your icons are hosted\n\nNotes:\n\n- To set a global icon path, you can set `process.env.ICON_PATH = /images/icons.svg`;\n\n### ValidationError [→](https://ustyle.guide/pattern-library/forms.html#validation_messages)\n\nExample:\n\n```js\nimport {ValidationError} from '@uswitch/ustyle-react';\n\n\u003cValidationError\u003eSomething went wrong!\u003c/ValidationError\u003e\n```\n\nProps:\n\n- `children` [node] - error message to display\n\nNotes:\n\n- Alias for `\u003cValidationMessage variant='error' children={children}/\u003e`\n\n### ValidationMessage [→](https://ustyle.guide/pattern-library/forms.html#validation_messages)\n\nExample:\n\n```js\nimport {ValidationMessage} from '@uswitch/ustyle-react';\n\nlet valid = true;\nlet message = 'You have been subscribe';\n\n\u003cValidationMessage variant={ valid ? 'success' : 'error'} children={message} /\u003e\n```\n\nProps:\n\n- `variant` [string] - options: error, success\n- `children` [node] - error message to display\n\n### Toggle [→](https://ustyle.guide/pattern-library/forms.html#toggle)\n\nExample:\n```js\nimport {Toggle} from '@uswitch/ustyle-react';\n\nconst items = [\n  {\n    text: 'Red',\n    value: 'red'\n  },\n  {\n    text: 'White',\n    value: 'white'\n  },\n  {\n    text: 'Rosé',\n    value: 'rose'\n  }\n];\n\nconst onChange = (e, item) =\u003e console.log(item);\n\n\u003cToggle items={items} onChange={onChange} name='toggle' /\u003e\n```\n\nProps:\n\n- `items` [array:objects]\n  - `text` [string/node]\n  - `value` [string]\n  - `disabled` [boolean]\n- `value` [string] - the current value for the toggle component\n- `name` [string]\n- `onChange` [function]\n\n### ToggleYesNo [→](https://ustyle.guide/pattern-library/forms.html#toggle)\n\nExample:\n```js\nimport {ToggleYesNo} from '@uswitch/ustyle-react';\n\nconst onChange = (e, item) =\u003e console.log(item);\n\n\u003cToggleYesNo value={true} onChange={onChange} name='toggle-yes-no' /\u003e\n```\n\nProps:\n\n- `value` [string] - the current value for the toggle component\n- `name` [string]\n- `onChange` [function]\n\n### Select [→](https://ustyle.guide/pattern-library/forms.html#selects)\n\n\nExample:\n```js\nimport {Select} from '@uswitch/ustyle-react';\n\nconst items = [{\n  text: 'Aye!',\n  value: 'yes'\n}, {\n  text: 'Nay...',\n  value: 'no'\n}];\n\nconst onChange = (e, item) =\u003e console.log(item);\n\n\u003cSelect items={items} onChange={onChange} name='select' /\u003e\n```\n\nProps:\n\n- `items` [array:objects]\n  - `text` [string/node]\n  - `value` [string]\n  - `disabled` [boolean]\n- `value` [string] the current value of the select component\n- `name` [string]\n- `variant` [string]\n- `disabled` [boolean]\n- `blocked` [boolean]\n- `onChange` [function]\n\n### InputGroup [→](https://ustyle.guide/pattern-library/forms.html#input_group)\n\nExample:\n```js\nimport {InputGroup} from '@uswitch/ustyle-react';\n\n\u003cInputGroup text=\"kwh\" position=\"right\"\u003e\n  \u003cinput className=\"us-form-input\" type=\"number\" id=\"energy\" placeholder=\"0\" /\u003e\n\u003c/InputGroup\u003e\n```\n\nProps:\n\n- `text` [string/node]\n- `icon` [string] replaces text\n- `position` [string] options: left, right\n- `disabled` [boolean]\n- `blocked` [boolean]\n\n### Tabs [→](https://ustyle.guide/pattern-library/javascript.html#tabs)\n\nExample:\n```js\nimport {Tabs} from '@uswitch/ustyle-react';\n\nconst items = [{\n  id: 'tab1', title: 'Tab 1', body: 'test'\n}, {\n  id: 'tab2', title: 'Tab 2', body: 'test', active: true\n}, {\n  id: 'tab3', title: 'Tab 3', body: 'test'\n}];\n\nconst onClick = (e, item) =\u003e console.log({activeTab: item})\n\n\u003cTabs items={items} onClick={onClick} /\u003e\n```\n\nProps:\n\n- `items` [array:objects]\n  - `id` [string]\n  - `href` [string]\n  - `title` [string]\n  - `body` [string/node]\n  - `active` [boolean]\n- `onClick` [function] (optional)\n\n### Overlay [→](https://ustyle.guide/pattern-library/javascript.html#overlay)\n\nExample:\n```js\nimport {Overlay} from '@uswitch/ustyle-react';\n// TODO: Write about overlay...\n```\n\nProps:\n\n- `title` [string]\n- `children` [string/node]\n- `variant` [string] - options: left, right, modal\n- `isOpen` [boolean]\n- `onClose` [function]\n\n### TextArea [→](https://ustyle.guide/pattern-library/forms.html#textarea)\n\nExample:\n```js\nimport {TextArea} from '@uswitch/ustyle-react';\n// TODO: Write about textarea...\n```\n\nProps:\n\n- `name` [string]\n- `value` [string]\n- `disabled` [boolean]\n- `blocked` [boolean]\n- `onChange` [function]\n\n### Tooltip [→](https://ustyle.guide/pattern-library/javascript.html#tooltip)\n\nExample:\n\n```css\n.tooltip-demo {\n  position: relative;\n}\n```\n\n```js\nimport {Tooltip} from '@uswitch/ustyle-react';\n\n\n\u003cTooltip\n  className=\"tooltip-demo\"\n  trigger={ \u003cdiv className=\"us-tooltip__icon\"\u003e\u003c/div\u003e }\n  tooltipContent={ \u003cdiv\u003eContent\u003c/div\u003e }\u003e\n  \u003cdiv\u003e\n    Hello\n  \u003c/div\u003e\n\u003c/Tooltip\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuswitch%2Fustyle-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuswitch%2Fustyle-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuswitch%2Fustyle-react/lists"}