infinity-modules-bas v0.1.7

Welcome to Infinity Modules!

This is a set of components which you can use in your projects. It is made up of the following components:

Modal

A simple modal which contains a title, body, and footer, used in the following way:

<h1> Modal </h1>
<button onClick={() => this.setState({isModalOpen:true})}>Open modal</button>
<Modal
    isOpen={isModalOpen}
    onClose={() => this.setState({ isModalOpen: false })
}>
    <Modal.Title>My Modal Title</Modal.Title>
    <Modal.Body>My Modal Body</Modal.Body>
    <Modal.Footer>My Modal Footer</Modal.Footer>
</Modal>

Row and Col

Row and column are two components that are connected, the purpose is to create a row which contains columns of varying sizes.

<h1>Rows</h1>
<Row>
    <Col size={1}></Col>
    <Col size={2}></Col>
    <Col size={9}></Col>
    <Col size={12}></Col>
</Row>

DatePicker

This component allows you to set a date and set its locale as well!

<DatePicker
    onDatePick={date => this.setState({date})}
    locale="en-EN" /> 

Carousel

Your friendly carousel is a general slider which can take 3 different sizes of images (small, medium, large).

<h1>Carousel</h1>
<Carousel
    images={[
        "someimage1.png",
        "someimage2.png",
        "someimage3.png",
    ]}
    size="large"/>

CartoonNetworkSpinner

A cute little spinner with images from some of my favorite cartoon network shows as a kid! As the name implies... they spin (at a certain interval)!

<h1>Cartoon Network Spinner</h1>
<CartoonNetworkSpinner interval={4}/>