rwidgets

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);