towelify

Towelify

Inspired by bootstrap, Towelify is a React library focused on easy modular components to quickly build sites. Offers attractively styled components to allow for quick website composition, while handling abstracting away their javascript and css interactions. Components include:

• Accordion
• Alert
• Button
• Card
• Carousel
• Dropdown
• Form
• Navs (including hamburger and dropdown menues)
• Progressbar
• Spinner

Please visit our storybook site for additional documentation

Features

The project is designed to allow quick composition of websites with reasonable styling defaults and an attractive user interface. In general, components make use of composite components, with implementation details abstracted away. Users are able to pass in their own functions to event handler props and rely that they will be called as needed by the components.

Code Example

An example of how a form is made use of can be seen below:

import { Form } from 'towelify'
import { handleSubmit } from './utils'

const App = > (
  <Form
    heading={{ title: 'A New Form', type: 'h3' }}
    onSubmit={handleSubmit}
    initialValues={{
      name: 'name',
      email: '[e-mail]',
    }}
  >
    <Form.Group property="name" type="text">
      <Form.Label>Name</Form.Label>
      <Form.TextInput />
    </Form.Group>

    <Form.Group property="email" type="email">
      <Form.Label>Email</Form.Label>
      <Form.TextInput />
    </Form.Group>
<Form>
);

export default App;

For further examples and further explanation, see our storybook.

Installation

The package is hosted on npm here. It can be installed using either npm:

npm i towelify

or yarn:

yarn add towlify

Alternatively, you can clone the repo and make use of the components directly in your project. The npm repo will have css styles included in the minified javascript. That means using the npm package you will need to use the css cascade to override rules, so if greater control over styles is needed, you will want to copy a component's folder from the src/ folder in this repo directly into your project and edit the style.css from there.

Credits

This package is maintained by the TowelJS team, which includes:

• @HTMLGhozt
• @phamhere
• @rytwalker
• @kamry-bowman
• @smarv

License

MIT