@incurso/wepo-18-infinity-modules
v0.1.7
Published
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
Downloads
5
Readme
This project was bootstrapped with Create React App.
Below you will find some information on how to perform common tasks.
Table of Contents
Modal
Takes the following props:
- isOpen - default false
- onClose : func
- <Modal.Title>My Modal Title</Modal.Title>
- <Modal.Body>My Modal Body</Modal.Body>
- <Modal.Footer>My Modal Footer</Modal.Footer> (optional)
import { Modal } from '@incurso/wepo-18-infinity-modules'
<button onClick={() => this.setState({ isModalOpen: true })}>Open modal!</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>
ProgressBar
Takes the following props:
- progress (0 - 100)
- striped (true/false) - default false
- animated (true/false) - default false
- state (info/success/warning/danger)
import { ProgressBar } from '@incurso/wepo-18-infinity-modules'
<ProgressBar
progress={25}
striped={false}
animated={false}
state={'info'} />
<ProgressBar
progress={50}
striped={true}
animated={false}
state={'success'} />
<ProgressBar
progress={75}
striped={false}
animated={true}
state={'warning'} />
<ProgressBar
progress={100}
striped={true}
animated={true}
state={'danger'} />
NameCard
Takes the following props:
- name
- telephone
- imageUrl
import { NameCard } from '@incurso/wepo-18-infinity-modules'
<NameCard>
<NameCard.ImageURL>http://myschool.ru.is/myschool2/public/default.aspx?Page=img&ID=arnarl
</NameCard.ImageURL>
<NameCard.Name>My name</NameCard.Name>
<NameCard.Email>[email protected]</NameCard.Email>
<NameCard.Telephone>847 2387</NameCard.Telephone>
</NameCard>
Carousel
Takes the following props:
- images (array)
- size (small, medium, large) - default medium
import { Carousel } from '@incurso/wepo-18-infinity-modules'
<Carousel
images={[
'https://static.giantbomb.com/uploads/original/0/1176/230441-thehoff.jpeg',
'https://i2.wp.com/mag.shock2.info/wp-content/uploads/2018/02/knight-rider-david-hasselhoff.jpg?resize=780%2C405',
'https://fortheloveofsci-fi.com/file/ms_website/w87/file/2017/09/18/david_hasselhoff_07_1.jpg'
]}
size="large" />
Row
Takes the following props:
- children (node)
import { Row, Col } from '@incurso/wepo-18-infinity-modules'
<Row>
<Col size={6}> </Col>
<Col size={6}> </Col>
</Row>
Col
Takes the following props:
- size - default 1
TimePicker
Not yet implemented Takes the following props:
import { TimePicker } from '@incurso/wepo-18-infinity-modules'
<TimePicker
onTimePick={time => this.setState({ time })}
format={24} />
DatePicker
Not yet implemented Takes the following props:
import { DatePicker } from '@incurso/wepo-18-infinity-modules'
<DatePicker
onDatePick={date => this.setState( {date })}
locale="en-EN" />
Tabs
Takes the following props:
- theme (dark/light) - default light
- layout (horizontal/vertical) default horizontal
- onSelect : func
- currentSelectedTab : number
import { Tabs, Tab } from '@incurso/wepo-18-infinity-modules'
<Tabs
theme="dark"
layout="horizontal"
onSelect={newTab => this.setState({ tab: newTab })}
currentSelectedTab={this.state.tab}>
<Tab selectionKey={1} title="Tab 1">
Content 1
</Tab>
<Tab selectionKey={2} title="Tab 2">
Content 2
</Tab>
<Tab selectionKey={3} title="Tab 3">
Content 3
</Tab>
</Tabs>
Tab
Takes the following props:
- selectionKey : number (corresponds to currentSelected tab in Tabs)
- title
CartoonNetworkSpinner
Takes the following props:
- interval : number (seconds) - default 3
import { CartoonNetworkSpinner } from '@incurso/wepo-18-infinity-modules'
<CartoonNetworkSpinner
interval={4} />