0.5.6 • Published 6 years ago
rwidgets v0.5.6
React Widgets
A set of components based on Bootstrap for use in React web applications.
Install
npm install --save rwidgets
If you are having problems with the puppeteer install on FreeBSD, try the following:PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm install puppeteer
Storybook
For examples of React Widgets in action, go to https://socketwiz.github.io/rwidgets/
OR
To run the storybook on your own computer:
- Clone this repository
- npm install
- npm start
- Visit http://localhost:6006/
Form
- <Button />
- <CheckBox />
- <Form />
- <Radio />
- <Select />
- <TextArea />
- <TextInput />
import {Button, CheckBox, Form, Radio, Select, TextArea, TextInput} from 'rwidgets';
function validateRequired(values) {
const validateEmailField = email => {
return email ? '' : 'Required';
};
return {
'email': validateEmailField(values.email)
};
}
const selectOptions = [
{
'label': 'Example 1',
'value': 'example-1'
},
{
'label': 'Example 2',
'value': 'example-2'
},
{
'label': 'Example 3',
'value': 'example-3'
}
];
<Form validateError={validateRequired}>
<TextInput field="email" placeholder="Email" type="text" />
<Radio field="example-radio1" name="exampleGroup">Example 1</Radio>
<Radio field="example-radio2" name="exampleGroup">Example 2</Radio>
<Radio field="example-radio3" name="exampleGroup">Example 3</Radio>
<TextArea field="message" label="Message" rows="6" />
<CheckBox field="example-checkbox1">Example 1</CheckBox>
<Select field="example-select1" options={selectOptions} />
<Button className="btn btn-secondary" type="submit">Test</Button>
</Form>
Alert
Options can be one of:
- alertType: primary (default), seconday, success, danger, warning, info, light, dark
- message: Message to display in the Alert component
import {Alert, Button, Form, withAlert} from 'rwidgets';
import PropTypes from 'prop-types';
import React from 'react';
function TestAlert(props) {
const {showAlert} = props;
function onShowAlert(event) {
event.preventDefault();
if (typeof showAlert === 'function') {
const options = {
'message': 'This is a primary alert—check it out!'
};
showAlert(options);
}
}
return <div className="container-fluid story">
<Form>
<Alert {...props} />
<Button className="btn btn-secondary"
onClick={onShowAlert}
type="submit">Show Alert</Button>
</Form>
</div>;
}
TestAlert.propTypes = {
'showAlert': PropTypes.func
};
export default withAlert(TestAlert);
0.5.7
6 years ago
0.5.6
6 years ago
0.5.5
6 years ago
0.5.4
6 years ago
0.5.3
6 years ago
0.5.2
6 years ago
0.5.1
6 years ago
0.5.0
6 years ago
0.4.1
6 years ago
0.4.0
6 years ago
0.3.0
6 years ago
0.2.6
6 years ago
0.1.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago