Callmd-guideline NPM

##Install npm i callmd-guideline --save

##Import import { Container, Button, Input, ... } from 'callmd-guideline';

##Link if you need simple link:

<Link href="your url" className='underline black'>some text</Link>

if you use the react-router
<Link to="your url" className='underline black'>some text</Link>

##Container ...

##Label ...

##Radio <Radio label='some text' checked={this.state.checked} onChange={() => this.setState({ checked: !this.state.checked })} />

##Checkbox <Checkbox label='some text' checked={this.state.checked} onChange={() => this.setState({ checked: !this.state.checked })} />

##Input

##Textarea

##Phone <Phone placeholder='...' label='...' message='...' value='...' onChange={...} country={ { code: '+1', name: 'USA', img: require('url to image') }, { code: '+7', name: 'Russia', img: require('url to image') }, { code: '+44', name: 'United Kingdom', img: require('url to image') }, } />

##Password

##Datepicker // to select single date // uses moment.js

<Datepicker
    label='Select date'
    date={this.state.date} // example: moment()
    onChange={(newDate) => this.setState({ date: newDate })}
    minYear={1800}
    maxYear={2019}
    
    // optional, default values are displayed
    format={{
        input: 'DD-MM-YYYY',
        month: 'MMMM',
        year: 'YYYY',
        daysOfWeek: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }}
/>

##ModalDatepicker <ModalDatepicker label='Modal datepicker' date={this.state.date} onChange={(newDate) => this.setState({ date: newDate })} style={{ marginRight: '30px' }} text={{ title: 'Some title', save: 'Save', cancel: 'Cancel', nullDate: 'Select date', days: 'Day', months: 'Month', years: 'Year', }} />

##Button ...

##Check Button <CheckButton className='green' // or red onClick={() => this.setState({ active: !this.state.active })} active={this.state.active}

>
    Some text
</CheckButton>

##Burger

##Modal {this.state.isOpen && <Modal width={300} height={400} close={() => this.setState({ isOpen: false })} />}

##Dropdown <Dropdown label='...' className='small ap' rows={ { value: 1, selected: false, onClick={() => selectRow(1) } }, { value: 2, selected: true, onClick={() => selectRow(2) } }, { value: 3, selected: false, onClick={() => selectRow(3) } } } />

##Multiselect <Multiselect label='...' rows={ { value: 1, selected: false, onClick={() => selectRow(1) } }, { value: 2, selected: true, onClick={() => selectRow(2) } }, { value: 3, selected: false, onClick={() => selectRow(3) } } } />

##Toast {this.state.show && <Toast close={() => this.setState({ show: false })}>Hello}

##Table

<Table
    head={{
        id: 'Id',
        name: 'Name',
        age: 'Age',
        sex: 'Sex',
    }}
    body=[
        { id: 1, name: 'Alex', age: 23, sex: 'M' },
        { id: 2, name: 'Shon', age: 23, sex: 'M' },
        { id: 3, name: 'Rick', age: 23, sex: 'M' },
        { id: 4, name: 'Page', age: 18, sex: 'W' },
    ]
/>

##Slider // add interval for auto scrolling (in milliseconds)

    <div style={{ background: '#3399FF' }}>slide 1</div>
    <div style={{ background: '#ee5d58' }}>slide 2</div>
    <div style={{ background: '#6FD7A0' }}>slide 3</div>
    <div style={{ background: '#ffc32f' }}>slide 4</div>
    <div style={{ background: '#ebebe4' }}>slide 5</div>
    <div style={{ background: '#37404a' }}>slide 6</div>
</Slider>

##Swiper // add interval for auto scrolling (in milliseconds)

    <div style={{ background: '#3399FF', width: '50px', height: '50px' }}>slide 1</div>
    <div style={{ background: '#ee5d58', width: '150px', height: '50px' }}>slide 2</div>
    <div style={{ background: '#6FD7A0', width: '50px', height: '50px' }}>slide 3</div>
    <div style={{ background: '#ffc32f', width: '200px', height: '50px' }}>slide 4</div>
    <div style={{ background: '#ebebe4', width: '200px', height: '50px' }}>slide 5</div>
    <div style={{ background: '#37404a', width: '150px', height: '50px' }}>slide 6</div>
    <div style={{ background: '#3399FF', width: '50px', height: '50px' }}>slide 7</div>
    <div style={{ background: '#ee5d58', width: '150px', height: '50px' }}>slide 8</div>
    <div style={{ background: '#6FD7A0', width: '50px', height: '50px' }}>slide 9</div>
    <div style={{ background: '#ffc32f', width: '200px', height: '50px' }}>slide 10</div>
    <div style={{ background: '#ebebe4', width: '200px', height: '50px' }}>slide 11</div>
    <div style={{ background: '#37404a', width: '150px', height: '50px' }}>slide 12</div>
    <div style={{ background: '#3399FF', width: '50px', height: '50px' }}>slide 13</div>
    <div style={{ background: '#ee5d58', width: '150px', height: '50px' }}>slide 14</div>
    <div style={{ background: '#6FD7A0', width: '50px', height: '50px' }}>slide 15</div>
    <div style={{ background: '#ffc32f', width: '200px', height: '50px' }}>slide 16</div>
    <div style={{ background: '#ebebe4', width: '200px', height: '50px' }}>slide 17</div>
    <div style={{ background: '#37404a', width: '150px', height: '50px' }}>slide 18</div>
</Swiper>

##MobileAppLink // uses userAgent to display the link // show only on mobile devices // show only on the transferred devices

<MobileAppLink
    config={{
        Android: 'http://link-to-googleplay',
        iPhone: 'http://link-to-appstore',
    }}
    text='Install the app'
/>