Infinity-modules-hauks96 NPM

Infinity Modules

Made as part of a university course project\ Author: Ægir Máni Hauksson

Carousel

Any number of images are supported
Left and right sliders
An animated image slide-in from either side
Indicators hidden until image is hovered.
Customizable by setting css style ID

Example usage

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

<Carousel size={"small"} images={["url1", "url2", "url3", "url4"]}/>

Required parameters:

images: Array. An array containing image urls.

Optional parameters:

size: Options are small,medium,large. Defaults to medium
id: Allows customizing the size of the carousel. Will be added as the html ID of the element.

Notes:\ When customizing size, both styles (width & height) should be set.

Date Picker

Awesome style
Calendar view
Multiple color options, defaults to blue

Example usage

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

// onCancel, visibility, isPopup, color & locale are optional.
<DatePicker onDatePick={ (date) => this.saveAndClose(date)}
            locale={ "en-GB" }
            color={"grey"}
            visible={ this.state.datePickerOpen }
            isPopup={ true }
            onCancel={ () => this.setState({ datePickerOpen: false }) }/>

// Simple version
<DatePicker onDatePick={ (date) => this.do_something() }/>

Required parameters:

onDatePick: Function will receive the currently selected date as parameter when the user presses the confirm button.

Optional parameters:

onCancel: Useful for doing something when the user wishes to cancel the date selection. When this parameter is passed the component will render the cancel button automatically and triggers the onCancel function when pressed
color: Options are grey, lightgrey,blue , purple, green, pink, red, orange, yellow
locale: Set a time language setting given as js date locale format. Ex: 'en-GB'. Defaults to 'is-IS'. All formats can be found here
visible: Boolean. Set false to hide, set true to show, false to hide. Defaults to true.
isPopup: Boolean. If set to true, the datepicker will be shown in a modal like manner popping over the foreground with a darkened background. Defaults to false.

Notes:\ You must specify the date target yourself.

Modal

Basic style
Customizable

Example usage

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

<Modal id="demoModal" isOpen={this.state.modalOpen} onClose={ () => this.closeModal() }>
    <Modal.Title>
        Demo Modal
    </Modal.Title>
    <Modal.Body id="demoModalBody">
        <div>
            This modal can be customized by adding your own html id's to the modal components.
        </div>
    </Modal.Body>
    <Modal.Footer>
        <button className="btn" onClick={() => this.closeModal() }>Confirm</button>
        <button className="btn" onClick={() => this.closeModal() }>Close</button>
    </Modal.Footer>
</Modal>

Required parameters:

onClose: Function decides what to do when the modal is closed.
isOpen: Boolean. Says whether the modal is open or not.

Optional parameters:

id: Id can be added to the modal or any sub component to add custom styles.

Spinner

Customizable
Spins on interval
Not very interesting

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

// Width and height are optional
<CartoonNetworkSpinner interval={3} width={180} height={180}/>

Optional parameters:

interval: Number. Sets the spinning interval time in seconds. Defaults to 3 seconds
width: Number. Set the width of the spinner. Defaults to 300px
height: Number. Set the height of the spinner. Defaults to 300px
borderLess: Boolean. Set true to have no border. Is false by default.
backgroundColor: String. String as rgb,rgba or hex color.
images: Array. Spin your own set of images.

Col & Row layout

Easy setup of rows and cols

Example usage

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

<Row>
    <Col styleCLS={"columnDemoBorder"} size={6}>
        Row 1: Column 1 size 6
    </Col>
    <Col styleCLS={"columnDemoBorder"} size={6}>
        Row 1: Column 2 size 6
    </Col>
    <Col styleCLS={"columnDemoBorder"} size={12}>
        Row 2: Column 1 size 12
    </Col>
</Row>

Required parameters for Col: