infinity-modules-olafurd18 v1.0.2

infinity-modules-olafurd18

This is a school project from RU that I was assigned to finish. You can absolutely use the components found here but be aware that there are probably better styling libraries out there.

Component Overview

I set up a page dedicated to presenting the various components that this library has to offer and it can be found here.

Components

This library offers a variety of React components that can be used in any way necessary. Here's a high-level overview for each component:

Modal

A dialogue modal which can be render child nodes.

import { Modal } from 'infinity-modules-olafurd18';

// jsx
<Modal
    isOpen={this.state.openModal}
    onClose={() => this.setState({openModal: false})}
>
    <Modal.Title>Modal title here</Modal.Title>
    <Modal.Body>Modal body here</Modal.Body>
    <Modal.Footer>Modal footer here</Modal.Footer>
</Modal>

Carousel

Image slider component with smooth transitions.

import { Carousel } from 'infinity-modules-olafurd18';

// jsx
<Carousel 
    images={[
        'http://image1.png', 
        'http://image2.png'
    ]}
    size={'medium'} // small, medium, large
/>

Row & Col

Grid system using Col and Row components where a row can be diveded into twelve columns. If total size of columns in a row exceeds twelve then the overflowing columns will drop down to next row.

import { Col, Row } from 'infinity-modules-olafurd18';

// jsx
<Row>
    <Col size={4}> // Size = 1 - 12
        // Some content here
    </Col>
</Row>

DatePicker

Component to choose a date from a calendar. This component's pop-up page works very similar to its Material-UI counterpart. You can click on the year in the header to select the year or the header date to select a specific day of month.

import { DatePicker } from 'infinity-modules-olafurd18';

// jsx
<DatePicker 
    locale="is-IS"
    onDatePick={(dateString) => { /* Do something here */ }}
/>

CartoonNetworkSpinner

Spins a few cartoon network character images at a given interval.

import { CartoonNetworkSpinner } from 'infinity-modules-olafurd18';

// jsx
<CartoonNetworkSpinner interval={5} />