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


    1.0.2 • Public • Published


    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.


    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:


    A dialogue modal which can be render child nodes.

    import { Modal } from 'infinity-modules-olafurd18';
    // jsx
        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>
    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


    Image slider component with smooth transitions.

    import { Carousel } from 'infinity-modules-olafurd18';
    // jsx
        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
        <Col size={4}> // Size = 1 - 12
            // Some content here
    prop description
    size Specifies how many of the 12 row portions this column should span


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


    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


    npm i infinity-modules-olafurd18

    DownloadsWeekly Downloads






    Unpacked Size

    7.02 MB

    Total Files


    Last publish


    • avatar