Getting Started
react-widgets is a suite of high-quality input components built for React. Each component is built for ease of use, accessibility, and the practical needs of complex (or simple) forms. The work great with complex data structures and models, and in keeping with the React approach to form inputs, each component's props can easily be controlled or uncontrolled.
A special shout-out to Kendo UI Core, and jQuery UI, whose original work inspired this suite.
Install: npm (recommended)
npm install react-widgets --save
bower
bower install react-widgets --save
The npm build offers an additional advantage of allowing you to only require the individual widgets allowing code bundlers like webpack and Browserify to only package up the pieces you use, saving you bytes.
Setup
Stylesheets, images, and fonts are found in the dist
directory. You can use webpack to require()
the styles, or include the css normally. The included icons are provided by - Font Awesome by Dave Gandy
// Add the css styles...
import 'react-widgets/dist/css/react-widgets.css';
// ...Or if you prefer to use the Less or Sass files directly
// import 'react-widgets/lib/less/react-widgets.less';
// import 'react-widgets/lib/scss/react-widgets.scss';
import { render } from 'react-dom';
import DropdownList from 'react-widgets/lib/DropdownList';
render(<DropdownList />, document.getElementById('app-root'))
Hey! Date and number components need a Localizer configured in order to work! Check out the Localization page for more information.
If are using webpack to handle styles in your application you are probably already configured loaders to make it work with appropriate file extensions. If not, you will have to use the css-loader
, style-loader
, url-loader
and, optionally, the less-loader
orscss-loader
.
Here's a common configuration:
module: {
loaders: [
// for good ol' css
{ test: /\\.css$/, use: ['style-loader', 'css-loader'] },
// OR if using less
{ test: /\\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// OR if using scss
{ test: /\\.scss$/, use: ['style-loader', 'css-loader', 'scss-loader'] },
// images and fonts
{
test: /\\.(gif|ttf|eot|svg|woff2?)$/,
use: 'url-loader?name=[name].[ext]',
},
]
}
When using Less or Sass, you'll need to help webpack find the font and image folders. Override corresponding variables from variables
file.
$font-path: '~react-widgets/lib/fonts';
$img-path: '~react-widgets/lib/img';
@import '~react-widgets/lib/scss/react-widgets';
Accessibility and Read Direction
React-widgets tries to be as inclusive and wide reaching as possible. Along with an included solution for date and number localization, there is first class support for cultures and languages that read right to left (with the isRtl
prop).
Each widget also has appropriate ARIA roles and attributes for the benefit of screen readers and visually impaired users. Keyboard-only navigation of widgets is also supported, for those who prefer to not, or cannot use a mouse. To help ensure maximum accessibility, every widget should have an id
attribute. If you do not wish to provide an id attribute, the component will generate the necessary id's to properly label and annotate the widget ARIA.
Note: Because of how server-side rendering works, using auto generated
id
s may cause checksum mismatches. Always provideid
props to your components to avoid this possible pitfall.