@finnure/infinity-modules v1.0.0

WEPO Small Assignment 4

Authors

Finnur Eiríksson - finnure21@ru.is Kristbjörg Eggertsdóttir - kristbjorge21@ru.is

Installation

npm install @finnure/infinity-modules

Usage

For styling you need to import index.css from the package like this:

import "@finnure/infinity-modules/dist/index.css";

There are 6 available components

Modal

Modal has two props

• isOpen: Boolean that controls if the modal is displayed or not
• onClose: A function that is called when the modal is closed

Modal also receives three children, Modal.Title, Modal.Body and Modal.Footer

Example

// Setup state to control if modal is open or closed
const [isOpen, setOpen] = useState(false);

<button onClick={() => setOpen(true)}>Open modal</button>
<Modal isOpen={isOpen} onClose={(e) => setOpen(false)}>
  <Modal.Title>My Modal Title</Modal.Title>
  <Modal.Body>My Modal Body</Modal.Body>
  <Modal.Footer>My Modal Footer</Modal.Footer>
</Modal>

Carousel

Carousel has two props

• images: A list of strings with urls pointing to an image
• size: small, medium (default) or large

Example

<Carousel images={[
"https://images.unsplash.com/photo-1679084185371-62a7dc4ffeff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1932&q=80",
"https://images.unsplash.com/photo-1679123441009-23f4aa73b82f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1932&q=80",
"https://plus.unsplash.com/premium_photo-1669446008735-985c4a7feee7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80",
"https://images.unsplash.com/photo-1679108316238-d8c188a66145?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1528&q=80",
]} size="medium" />

Row and Col

Row specifies a section split into 12 evenly sized columns. It should receive any number of Col as children.

Col has one prop

• size: How many columns should it span, default 1.

Example

<Row>
  <Col size={3}></Col>
  <Col size={4}></Col>
  <Col size={5}></Col>
</Row>

DatePicker

DatePicker has two props

• onDatePick: Function that is called when a date is picked. It returns the date in string format based on selected locale
• locale: The locale date should be formatted in, default is-IS

Example

// Setup state to receive selected day and to select locale
const [day, setDay] = useState("");
const [locale, setLocale] = useState("is-IS");

<input value={day} readOnly />
<select onChange={(e) => setLocale(e.target.value)}>
  <option value="is-IS">IS</option>
  <option value="en-US">US</option>
  <option value="en-EN">EN</option>
  <option value="ko-KR">KR</option>
</select>
<DatePicker
  onDatePick={setDay}
  locale={locale}
/>

CartoonNetworkSpinner

A fun loading indicator, has one prop

• interval: Time in seconds between changing characters, default 3

Example

<CartoonNetworkSpinner interval="{4}" />