infinity-modules-andril18 v1.0.0

infinity-modules

This package is made for Small assignment 4 in the course T-427-WEPO in Reykjavik university

Installation

To set up the infinity-modules package simply run the following command.

npm install --save infinity-modules-andril18

Usage

The Project is split into 6 parts and will the following give you a sample code for that part.

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

Modal

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { isModalOpen: false };
  }
  render() {
    const { isModalOpen } = this.state;
    return (
      <div className="Modal">
        <button onClick={() => this.setState({ isModalOpen: true })}>Click me</button>
        <Modal
          isOpen={isModalOpen}
          onClose={() => this.setState({ isModalOpen: false })}>
          <Modal.Title>MY MODAL TITLE</Modal.Title>
          <Modal.Body>MY MODAL BODY</Modal.Body>
          <Modal.Footer>MY MODAL FOOTER</Modal.Footer>
        </Modal>
      </div>
    );
  }
}

Carousel

<Carousel
  images={[
    'https://www.bradtguides.com/wp-content/uploads/2021/03/fagradalsfjall_eruption_iceland_AmarokAdventures-1024x682.jpg',
    'https://s.abcnews.com/images/International/iceland-volcano-eruption-04-rt-jef-210322_1616438993240_hpEmbed_3x2_992.jpg'
  ]}
  size='medium'
  />

Row and Col

<Row>
  <Col size={6}>name</Col>
  <Col size={6}>name</Col>
</Row>

DatePicker & CartoonNetworkSpinner

Were not implemented in time but that should have worked with the following:

<div className="DatePicker">
  <h2> DatePicker </h2>
  <DatePicker
    onDatePick={date => this.setState({ date })}
    locale="en-EN" />
</div>
<div className="CartoonNetworkSpinner">
  <h2> CartoonNetworkSpinner </h2>
  <CartoonNetworkSpinner
    interval={4} />
</div>