# react-responsive-ui [![npm version](https://img.shields.io/npm/v/react-responsive-ui.svg?style=flat-square)](https://www.npmjs.com/package/react-responsive-ui) Responsive React UI components. [See Demo](https://catamphetamine.gitlab.io/react-responsive-ui/) ## GitHub On 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). ## Install ``` npm install react-responsive-ui --save ``` React >= 16.3 is required. ## Use See the [demo page](#demo). It has code examples for every component. ## Demo [Online demo page](https://catamphetamine.gitlab.io/react-responsive-ui/). To run the demo page locally: ``` npm run demo ``` And then go to http://localhost:8080 ## CSS The CSS for this library resides in `react-responsive-ui/style.css` file and should be included on a page. The 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: ```css :root { --rrui-unit : 12px; --rrui-white-color : white; --rrui-black-color : black; --rrui-accent-color : blue; --rrui-accent-color-light : cyan; --rrui-gray-color : gray; } ``` Native 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). #### When using Webpack ```js // React Responsive UI. require('react-responsive-ui/style.css') // Custom variable values. require('./src/styles/react-responsive-ui-custom-variable-values.css') ``` And 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. #### When not using Webpack Get 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. ```html ``` ## Small Screen The [`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, `` is not focused on touch meaning that the keyboard won't slide in when the user taps the `` input. */ @import url(~react-responsive-ui/small-screen/DatePicker.InputOverlay.css) (max-width: 768px) ``` ## Validation Each 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. ## Asterisk on required fields To show asterisks (`*`) on required fields' labels: When field `value` is empty: ```css /* (when the `value` is empty) */ /* Required input field labels will have asterisks. */ .rrui__input-label--required:after { content: '*'; margin-left: 0.2em; } ``` Regardless of whether the field `value` is empty or not: ```css /* (regardless of whether the `value` is empty or not) */ /* Required input field labels will have asterisks. */ .rrui__input-label--required-field:after { content: '*'; margin-left: 0.2em; } ``` ## Supported Browsers IE 11, Edge, Firefox, Chrome, Safari (macOS, iOS) — have been tested. Expandable components (`Select`, `Autocomplete`, `ExpandableMenu`) require `Promise` which is not present in IE 11 and requires a `Promise` polyfill to be included on a page. ## Reducing footprint ### Code For a "tree-shaking" bundler (should work, but check it yourself just in case): ```js import { Modal, Button, TextInput } from 'react-responsive-ui' ``` For "ECMAScript modules" imports: ```js import Modal from 'react-responsive-ui/modules/Modal' import Button from 'react-responsive-ui/modules/Button' import TextInput from 'react-responsive-ui/modules/TextInput' ``` For CommonJS imports: ```js import Modal from 'react-responsive-ui/commonjs/Modal' import Button from 'react-responsive-ui/commonjs/Button' import TextInput from 'react-responsive-ui/commonjs/TextInput' ``` ### Styles The 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. For example, the `

	Stars	Issues	Version	Updated	Created
react-media-query-hoc	59	21	2.1.1	4 years ago	7 years ago
react-querybuilder	1,049	19	7.3.0	2 days ago	8 years ago
react-responsive-ui			0.15.57	15 days ago	7 years ago

react-media-query-hoc vs react-querybuilder vs react-responsive-ui

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past