1.0.0 • Published 2 years ago
@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 notonClose
: 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 imagesize
:small
,medium
(default) orlarge
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 localelocale
: 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}" />
1.0.0
2 years ago