Have ideas to improve npm?Join in the discussion! »

    towelify

    2.2.1 • Public • Published

    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

    Code Style

    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

    Keywords

    none

    Install

    npm i towelify

    DownloadsWeekly Downloads

    8

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    433 kB

    Total Files

    73

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar