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: 'email@email.com',
}}
>
<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:
License
MIT