infinity-modules-mfm v0.1.1

infinity-modules-mfm

infinity-modules-mfm is a css-module styling library.

Installation

npm install --save infinity-modules-mfm

Example usage

import React from 'react';
import { Carousel, CartoonNetworkSpinner, Col, DatePicker, Modal, Row } from 'infinity-modules-mfm';

class App extends React.Component {
  state = {
    modalIsOpen: false,
    calendarIsOpen: false,
    date: new Date().toLocaleDateString("is-IS"),
  }

  render() {
    return (
      <div className={ styles.container }>
        <div className={ styles.headerItem }>
          <h1>Small Assignment 4</h1>
        </div>
        <div className={ styles.containerItem }>
          <h1>Modal</h1>
          <button className={ styles.btnStyle } onClick={ () => this.setState({ modalIsOpen: true }) }>Open Modal</button>
          <Modal
            isOpen={ this.state.modalIsOpen }
            onClose={ () => this.setState({ modalIsOpen: false }) }>
            <Modal.Title>My Modal Title</Modal.Title>
            <Modal.Body>My Modal Body</Modal.Body>
            <Modal.Footer>My Modal Footer</Modal.Footer>
          </Modal>
        </div>
        <div className={ styles.containerItem }>
          <h1>Carousel</h1>
          <Carousel
            images={[
              'https://upload.wikimedia.org/wikipedia/commons/a/a3/LakesideParkCarousel.jpg',
              'https://divinotes.com/wp-content/uploads/2017/08/Free-WordPress-Logo-Carousel-hero.jpg',
              'https://www.daysoftheyear.com/wp-content/uploads/carousel-day.jpg'
            ]}
            size="medium" />
        </div>
        <div className={ styles.containerItem }>
          <h1>Row / Col</h1>
          <Row>
            <Col size={6}></Col>
            <Col size={4}></Col>
            <Col size={4}></Col>
          </Row>
        </div>
        <div className={ styles.containerItem }>
          <h1>Date Picker</h1>
          <p>Selected date: { this.state.date }</p>
          <button className={ styles.btnStyle } onClick={ () => this.setState({ calendarIsOpen: true }) }>Open Calendar</button>
          <DatePicker
            isOpen = { this.state.calendarIsOpen }
            onDatePick={ date => this.setState({ date: date, calendarIsOpen: false }) }
            locale="en-En" />
        </div>
        <div className={ styles.containerItem }>
          <h1>Cartoon Network Spinner</h1>
          <CartoonNetworkSpinner
            interval={4} />
        </div>
      </div>
    );
  }
};

export default App;

Project

Small project for Web-Programming II course at Reykjavik University.

License

MIT