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>

| prop | description | | ---- | ----------- | | isOpen | A boolean that specifies whether the modal is visible or not | | onClose | A function that is run whenever the 'close' button on the modal is clicked |

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
/>

| prop | description | | ---- | ----------- | | images | An array of valid image URL's | | size | Specifies the size of the carousel. Either small, medium (default) or 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>

| prop | description | | ---- | ----------- | | size | Specifies how many of the 12 row portions this column should span |

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 */ }}
/>

| prop | description | | ---- | ----------- | | onDatePick | A function run whenever the user clicks on a date in the picker | | locale | The locale of the date passed to onDatePick and displayed in the text box |

CartoonNetworkSpinner

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

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

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

| prop | description | | ---- | ----------- | | interval | The interval between spins, in seconds |