Cacofonix

Develop Master History

This is a set of Bootstrap-themed React components, centered primarily around a Form element that provides support for client-side form validation.

IMPORTANT! This package is under heavy development and could undergo breaking changes at any time!

I'm developing this package to use in a couple of my personal projects. Eventually, I will settle on a final design for these components and, at that point, this will probably be a useful open source package. Until then, use this package at your own risk!

Dependencies

These components are styled as Bootstrap elements, so you will need to ensure that Bootstrap styles are included, either via a CDN or by building your own CSS file & including it.

The components also make use of Font Awesome icons, so again you will need to either include it via a CDN or serve the CSS & font files from your own server. I could make this an optional dependency (see the To Do Section] below), but I prefer Font Awesome, so this is not a high priority.

Components

The basic Bootstrap Alert, adapted for use as a React component.

Properties

• style (string) - The style of the alert. See the Styles section below
• dismissible (bool) - Is the Alert dismissible? (Note: this does not currently work)
• children (element or array of elements) -

A Bootstrap Panel.

Properties

• style (string) - The style of the panel. See the Styles section below
• header (string) - The (optional) header for the panel
• children (node or array of nodes) - The content for the panel

<Form.Button>

<Form.CheckboxGroup>

<Form.Dropdown>

<Form.RadioButtonGroup>

<Form.SubmitButton>

<Form.TextInput>

Validation

Styles

Bootstrap provides a number of standard styles used in coloring elements. I have found the names of some of these styles to be kind of counterintuitive, so I've defined a few synonyms. You can, of course, use the original Bootstrap name if you wish. Note that all names are case-sensitive.

+---------------+----------+ | Boostrap Name | Synonyms | +---------------+----------+ | success | ok | | info | | | warning | warn | | danger | error | | primary | | | default | | +---------------+----------+

The last two, primary and default are not used for Alert components - these are mapped to 'info' for alerts.

To Do

1. map primary and default styles to info for Alert components
2. correct the Alert dismissible property
3. revise the prop types of the Alert component children property to handle text or React elements
4. make the use of icon fonts (Font Awesome vs. Glyphicons) conditional
5. in TextInput - if it's readonly, then format the value whenever the props change