infinity-modules-thord18 v1.0.1

infinity-modules-thord18

Description:

This is a styling package that contains a number of components:

Modal, Carousel, Row, Col, DatePicker, and CartoonNetworkSpinner

Install:

npm install infinity-modules-thord18

Importing:

import {Modal, Carousel, Row, Col, DatePicker, CartoonNetworkSpinner} from 'infinity-modules-thord18'

The Components in this package:

Modal

<Modal
    isOpen={this.state.isOpen}
    onClose={() => this.setState({ isOpen: false })}>
    <Modal.Title>Any title you want</Modal.Title>
    <Modal.Body>Any body you want</Modal.Body>
    <Modal.Footer>Any footer you want</Modal.Footer>
</Modal>

Description:

This is a modal. You can make it pop up whenever you want in order to show the user important details, or to alert him about something interesting.

Parameters:

• isOpen: A boolean parameter that specifies if the modal should appear or not. Not required, defaults to false
• onClose: A function that does whatever you want it to do when you close the modal
• Modal.Title: The title of the modal
• Modal.Body: The body of the modal
• Modal.Footer: The footer of the modal. Not required.

Carousel

<Carousel
    images={[
        'https://example.com/picture1.jpg',
        'https://example.com/picture2.jpg',
    ]}
    size="medium" />

Description:

This is a slideshow. This component allows you to show one image of many at a time and scroll through them with ease.

Parameters:

• images: An array of strings that point to external images
• size: Either small, medium, or large. Specifies how big the Carousel component should be. Not required, defaults to medium.

Row and Col

<Row>
    <Col size={4}></Col>
    <Col size={4}></Col>
    <Col size={4}></Col>
</Row>

Description:

This is a good component to use if you want to format anything in a grid-like manner. Each row has one or more columns which you can format however you want with the size parameter in each column. Each row can only hold maximum size of 12, if it gets any more then the columns spill over to the next row.

Parameters:

• size: The size of the column. Not required, defaults to 1.

DatePicker

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

Description:

A visual datepicker which you can use to pick dates in the specified locale. It defaults to the current date.

Parameters:

• onDatePick: A function that runs whenever you pick a date. Can be whatever you want
• locale: Determines what the locale the date string should be passed to onDatePick. Not required, defaults to is-IS

CartoonNetworkSpinner

<CartoonNetworkSpinner
    interval={4} />

Description:

A spinner that shows many beloved Cartoon Network characters and spins on an even interval. When it spins the image shown changes into another image of a character from Cartoon Network.

Parameters:

• interval: The interval the component spins (in seconds). Not required, defaults to 3.

Author:

Þór Breki Davíðsson

Reason for the creation of this package:

This was a school project