Have ideas to improve npm?Join in the discussion! »

    infinity-modules-olafurd18

    1.0.2 • Public • Published

    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

    Install

    npm i infinity-modules-olafurd18

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    7.02 MB

    Total Files

    20

    Last publish

    Collaborators

    • avatar