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 />
; { const validateEmailField = { return email ? '' : 'Required'; }; return '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
;;;{const showAlert = props;{event;if typeof showAlert === 'function'const options ='message': 'This is a primary alert—check it out!';;}return <div className="container-fluid story"><Form><Alert ...props /><Button className="btn btn-secondary"onClick=onShowAlerttype="submit">Show Alert</Button></Form></div>;}TestAlertpropTypes ='showAlert': PropTypesfunc;TestAlert;