{"id":13468683,"url":"https://github.com/catamphetamine/react-responsive-ui","last_synced_at":"2025-07-18T20:32:41.735Z","repository":{"id":65592877,"uuid":"75623581","full_name":"catamphetamine/react-responsive-ui","owner":"catamphetamine","description":"Responsive React UI components","archived":false,"fork":false,"pushed_at":"2024-05-31T14:15:09.000Z","size":22305,"stargazers_count":69,"open_issues_count":0,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-09T15:35:00.429Z","etag":null,"topics":["react","ui"],"latest_commit_sha":null,"homepage":"https://catamphetamine.gitlab.io/react-responsive-ui/","language":"JavaScript","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/catamphetamine.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-12-05T12:41:26.000Z","updated_at":"2024-05-31T14:15:13.000Z","dependencies_parsed_at":"2024-05-31T15:44:38.743Z","dependency_job_id":"e9409085-e75e-4e34-8bb8-c0725b286765","html_url":"https://github.com/catamphetamine/react-responsive-ui","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/catamphetamine/react-responsive-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-responsive-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-responsive-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-responsive-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-responsive-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/catamphetamine","download_url":"https://codeload.github.com/catamphetamine/react-responsive-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/catamphetamine%2Freact-responsive-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265828638,"owners_count":23835081,"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":["react","ui"],"created_at":"2024-07-31T15:01:16.654Z","updated_at":"2025-07-18T20:32:41.673Z","avatar_url":"https://github.com/catamphetamine.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-responsive-ui\n\n[![npm version](https://img.shields.io/npm/v/react-responsive-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-responsive-ui)\n\nResponsive React UI components.\n\n[See Demo](https://catamphetamine.gitlab.io/react-responsive-ui/)\n\n## GitHub\n\nOn March 9th, 2020, GitHub, Inc. silently [banned](https://medium.com/@catamphetamine/how-github-blocked-me-and-all-my-libraries-c32c61f061d3) my account (and all my libraries) without any notice. I opened a support ticked but they didn't answer. Because of that, I had to move all my libraries to [GitLab](https://gitlab.com/catamphetamine).\n\n## Install\n\n```\nnpm install react-responsive-ui --save\n```\n\nReact \u003e= 16.3 is required.\n\n## Use\n\nSee the [demo page](#demo). It has code examples for every component.\n\n## Demo\n\n[Online demo page](https://catamphetamine.gitlab.io/react-responsive-ui/).\n\nTo run the demo page locally:\n\n```\nnpm run demo\n```\n\nAnd then go to http://localhost:8080\n\n## CSS\n\nThe CSS for this library resides in `react-responsive-ui/style.css` file and should be included on a page.\n\nThe stylesheet uses [native CSS variables](https://medium.freecodecamp.org/learn-css-variables-in-5-minutes-80cf63b4025d) for easier styling. See [`variables.css`](https://gitlab.com/catamphetamine/react-responsive-ui/blob/master/variables.css) for the list of all available variables. These variables have some sensible defaults which can be overridden:\n\n```css\n:root {\n  --rrui-unit               : 12px;\n  --rrui-white-color        : white;\n  --rrui-black-color        : black;\n  --rrui-accent-color       : blue;\n  --rrui-accent-color-light : cyan;\n  --rrui-gray-color         : gray;\n}\n```\n\nNative CSS variables work in all modern browsers, but older ones like Internet Explorer [wont't support them](https://caniuse.com/#search=var). For compatibility with such older browsers one can use a CSS transformer like [PostCSS](http://postcss.org/) with a \"CSS custom properties\" plugin like [`postcss-custom-properties`](https://github.com/postcss/postcss-custom-properties).\n\n#### When using Webpack\n\n```js\n// React Responsive UI.\nrequire('react-responsive-ui/style.css')\n// Custom variable values.\nrequire('./src/styles/react-responsive-ui-custom-variable-values.css')\n```\n\nAnd set up a [`postcss-loader`](https://github.com/postcss/postcss-loader) with a [CSS autoprefixer](https://github.com/postcss/autoprefixer) for supporting old web browsers.\n\n#### When not using Webpack\n\nGet the `style.css` file from this package, process it with a [CSS autoprefixer](https://github.com/postcss/autoprefixer) for supporting old web browsers, and then include it on a page.\n\n```html\n\u003chead\u003e\n  \u003c!-- React Responsive UI --\u003e\n  \u003clink rel=\"stylesheet\" href=\"/css/react-responsive-ui/style.css\"/\u003e\n  \u003c!-- Custom variable values --\u003e\n  \u003clink rel=\"stylesheet\" href=\"/css/react-responsive-ui-custom-variable-values.css\"/\u003e\n\u003c/head\u003e\n```\n\n## Small Screen\n\nThe [`small-screen`](https://gitlab.com/catamphetamine/react-responsive-ui/tree/master/small-screen) directory contains \"small screen\" (\"mobile devices\") styles for some of the components. For example, `\u003cSelect/\u003e`s, `\u003cAutocomplete/\u003e`s, `\u003cExpandableMenu/\u003e`s, `\u003cDatePicker/\u003e`s can open in fullscreen (not neccessarily a good idea though). `\u003cModal/\u003e`s have less padding and `\u003cSnackbar/\u003e`s are full-width. These CSS files may also use [native CSS variables](https://medium.freecodecamp.org/learn-css-variables-in-5-minutes-80cf63b4025d).\n\nNative CSS [`@import`](https://developer.mozilla.org/docs/Web/CSS/@import) example:\n\n```css\n/* Main style. */\n@import url(~react-responsive-ui/style.css)\n/* Less padding on `\u003cModal/\u003e`s on mobile devices. */\n@import url(~react-responsive-ui/small-screen/Modal.css) (max-width: 768px)\n/* Full-width `\u003cSnackbar/\u003e`s on mobile devices. */\n@import url(~react-responsive-ui/small-screen/Snackbar.css) (max-width: 768px)\n/* Places a click-capturing overlay above `\u003cDatePicker/\u003e` input\n   so that the `\u003cinput/\u003e` is not focused on touch meaning that the\n   keyboard won't slide in when the user taps the `\u003cDatePicker/\u003e` input. */\n@import url(~react-responsive-ui/small-screen/DatePicker.InputOverlay.css) (max-width: 768px)\n```\n\n\u003c!--\nSCSS `@import` example:\n\n```css\n@import \"~react-responsive-ui/style\";\n\n@media (max-width: 768px) {\n  @import \"~react-responsive-ui/small-screen/Modal\";\n  @import \"~react-responsive-ui/small-screen/Snackbar\";\n  @import \"~react-responsive-ui/small-screen/DatePicker.InputOverlay\";\n}\n```\n--\u003e\n\n## Validation\n\nEach form component can be passed an `error: String` property. When passed, the component will be styled as \"invalid\" and the `error` will be displayed under the component.\n\n## Asterisk on required fields\n\nTo show asterisks (`*`) on required fields' labels:\n\nWhen field `value` is empty:\n\n```css\n/* (when the `value` is empty) */\n/* Required input field labels will have asterisks. */\n.rrui__input-label--required:after {\n  content: '*';\n  margin-left: 0.2em;\n}\n```\n\nRegardless of whether the field `value` is empty or not:\n\n```css\n/* (regardless of whether the `value` is empty or not) */\n/* Required input field labels will have asterisks. */\n.rrui__input-label--required-field:after {\n  content: '*';\n  margin-left: 0.2em;\n}\n```\n\n## Supported Browsers\n\nIE 11, Edge, Firefox, Chrome, Safari (macOS, iOS) — have been tested.\n\nExpandable components (`Select`, `Autocomplete`, `ExpandableMenu`) require `Promise` which is not present in IE 11 and requires a `Promise` polyfill to be included on a page.\n\n## Reducing footprint\n\n### Code\n\nFor a \"tree-shaking\" bundler (should work, but check it yourself just in case):\n\n```js\nimport { Modal, Button, TextInput } from 'react-responsive-ui'\n```\n\nFor \"ECMAScript modules\" imports:\n\n```js\nimport Modal     from 'react-responsive-ui/modules/Modal'\nimport Button    from 'react-responsive-ui/modules/Button'\nimport TextInput from 'react-responsive-ui/modules/TextInput'\n```\n\nFor CommonJS imports:\n\n```js\nimport Modal     from 'react-responsive-ui/commonjs/Modal'\nimport Button    from 'react-responsive-ui/commonjs/Button'\nimport TextInput from 'react-responsive-ui/commonjs/TextInput'\n```\n\n### Styles\n\nThe CSS styles could also be imported selectively (theoretically): instead of importing the whole `react-responsive-ui/style.css` bundle, one could import just the necessary styles from the `react-responsive-ui/styles/` folder. But there's a catch: some components' styles may also require some other styles to be loaded.\n\nFor example, the `\u003cButton/\u003e` component requires the following stylesheets to be loaded:\n\n* `react-responsive-ui/styles/Button.css`\n* `react-responsive-ui/styles/ButtonReset.css`\n* `react-responsive-ui/styles/Input.css`\n\nAnd the `\u003cDatePicker/\u003e` component requires the following stylesheets to be loaded (didn't check):\n\n* `react-responsive-ui/styles/DatePicker.css`\n* `react-responsive-ui/styles/ButtonReset.css`\n* `react-responsive-ui/styles/Input.css`\n* `react-responsive-ui/styles/TextInput.css`\n* `react-responsive-ui/styles/Expandable.css`\n* `react-responsive-ui/styles/Close.css`\n\nAnd don't forget about also including `react-responsive-ui/variables.css` when going with the selective styles import approach.\n\nSo it might be easier to just import the whole `react-responsive-ui/style.css` file.\n\n## Outline\n\nBy default all buttons and inputs have `rrui__outline` CSS class attached to them which hides the default browser outline for focused components.\n\n```css\n.rrui__outline:not(.rrui__outline--default) {\n  outline: none;\n}\n```\n\nInstead of using the default browser outline which doesn't look pretty by any standards and which nobody uses (not \"Google\", not \"Apple\", not anyone else) the default `react-responsive-ui` styles define some custom `:focus` styling for most cases (though not for all of them). Still, these out-of-the-box `:focus` styles are quite subtle and if a developer is implementing a [WAI-ARIA](https://developers.google.com/web/fundamentals/accessibility/)-compliant website then they should make sure that those `:focus` styles are more pronounced in each case.\n\nAlternatively, those looking for a very-quick-and-dirty solution can use the same default browser outline, but prettier.\n\n```css\n.rrui__outline:focus {\n  box-shadow: 0 0 0 0.15rem #00aaff;\n}\n```\n\nIf a developer still prefers the default browser outline then they still can manually add `rrui__outline--default` CSS class to buttons and inputs to prevent `outline: none` CSS rule from being applied.\n\nThere's also an exported component called `\u003cKeyboardNavigationListener/\u003e` which listens to `keydown` events on `document.body`, and when it detects a `Tab` key being pressed it adds `rrui__tabbing` CSS class to `document.body`. Any further mouse or touch events reset the `rrui__tabbing` CSS class. This way `rrui__outline` can only be shown when the user is actually tabbing. It's still not considered a 100%-formally-correct solution because \"screen readers\" still emit all kinds of mouse events, or maybe some \"screen readers\" hypothetically don't emit a \"keydown\" event for the `Tab` key — who knows. It's more of an experimental feature. There're some other possible ideas like `./source/Interaction.js`.\n\n## Inspecting Expandables\n\nExpandables are implemented in such a way that they collapse when losing focus. This may present difficulties when trying to inspect expandable content via DevTools because switching to DevTools captures focus causing expandables to collapse. For such cases there's a global debug flag `window.rruiCollapseOnFocusOut` which can be set to `false` to prevent expandables from collapsing when losing focus. This flag affects: `\u003cSelect/\u003e`, `\u003cAutocomplete/\u003e`, `\u003cExpandableMenu/\u003e`, `\u003cSlideOutMenu/\u003e`, `\u003cDatePicker/\u003e`, `\u003cSnackbar/\u003e`, `\u003cTooltip/\u003e`.\n\n## Known Issues\n\nAn overflown `\u003cModal/\u003e` scroll is janky on iOS because it tries to scroll `\u003cbody/\u003e` instead of the `\u003cModal/\u003e` contents. [That's how it is on iOS](https://codeandmortar.com/blog/fed-tips-1/).\n\n## Contributing\n\nAfter cloning this repo, ensure dependencies are installed by running:\n\n```sh\nnpm install\n```\n\nThis module is written in ES6 and uses [Babel](http://babeljs.io/) for ES5\ntranspilation. Widely consumable JavaScript can be produced by running:\n\n```sh\nnpm run build\n```\n\nOnce `npm run build` has run, you may `import` or `require()` directly from\nnode.\n\nAfter developing, the full test suite can be evaluated by running:\n\n```sh\nnpm test\n```\n\nWhen you're ready to test your new functionality on a real project, you can run\n\n```sh\nnpm pack\n```\n\nIt will `build`, `test` and then create a `.tgz` archive which you can then install in your project folder\n\n```sh\nnpm install [module name with version].tar.gz\n```\n\n## License\n\n[MIT](LICENSE)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatamphetamine%2Freact-responsive-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcatamphetamine%2Freact-responsive-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcatamphetamine%2Freact-responsive-ui/lists"}