react-uikit3 v0.14.0

Available components

• Accordion
• Alert
• Countdown
• Cover
• Grid
• Drop
• Dropdown
• Sticky
• Lightbox
• Nav
• NavBar
• Slideshow
• Icon
• Spinner

Accordion

Official guide

import {Accordion} from 'react-uikit3';

React.render((
  <Accordion>
    <li>
      <h3 className='uk-accordion-title'>
        Accordion title 1
      </h3>
      <div className='uk-accordion-content'>
        Accordion Text 1
      </div>
    </li>
    <li>
      <h3 className='uk-accordion-title'>
        Accordion title 2
      </h3>
      <div className='uk-accordion-content'>
        Accordion Text 2
      </div>
    </li>
    <li>
      <h3 className='uk-accordion-title'>
        Accordion title 3
      </h3>
      <div className='uk-accordion-content'>
        Accordion Text 3
      </div>
    </li>
  </Accordion>
), element);

Alert

Official guide

import {Alert} from 'react-uikit3';

React.render((
  <Alert className='uk-alert-success'>
    Alert successfull!
    <a className='uk-alert-close'>Close</a>
  </Alert>
), element);

Countdown

Official guide

import {Countdown} from 'react-uikit3';

React.render((
  <Countdown date={date}>
    <div>
      <div className="uk-countdown-number uk-countdown-days"></div>
    </div>
    <div>
      <div className="uk-countdown-number uk-countdown-hours"></div>
    </div>
    <div>
      <div className="uk-countdown-number uk-countdown-minutes"></div>
    </div>
    <div>
      <div className="uk-countdown-number uk-countdown-seconds"></div>
    </div>
  </Countdown>
), element);

Cover

Official guide

import {Cover} from 'react-uikit3';

React.render((
  <div>
    <div class="uk-cover-container uk-height-medium">
      <Cover type='image' src='/path/to/image.jpg' />
    </div>
    <div class="uk-cover-container uk-height-medium">
      <Cover type='iframe' src='/path/to/frame' />
    </div>
    <div class="uk-cover-container uk-height-medium">
      <Cover type='video'>
        <source src="/path/to/video.mp4" type="video/mp4">
      </Cover>
    </div>
  </div>
), element);

Grid

Official guide

import {Grid} from 'react-uikit3';

React.render((
  <Grid>
    <div className='uk-width-1-2'>
      Left column
    </div>
    <div className='uk-width-1-2'>
      Right column
    </div>
  </Grid>
), element);

Drop

Official guide

import {Drop} from 'react-uikit3'
React.render((
  <div className="uk-inline">
    <button className="uk-button">
      Show drop
    </button>
    <Drop>
      <div className="uk-card uk-card-body uk-card-default">
        Drop
      </div>
    </Drop>
  </div>
), element)

Dropdown

Official guide

import {Dropdown} from 'react-uikit3'
React.render((
  <div className="uk-inline">
    <button className="uk-button">
      Show dropdown
    </button>
    <Dropdown>
      <ul className="uk-nav uk-dropdown-nav">
          <li className="uk-active"><a>One</a></li>
          <li><a>Two</a></li>
          <li className="uk-nav-header">Three</li>
      </ul>
    </Dropdown>
  </div>
), element)

Sticky

Official guide

import {Sticky} from 'react-uikit3';

React.render((
  <Sticky>
    <h1>
      I am a sticky
    </h1>
  </Sticky>
), element);

Lightbox

Official guide

import {Lightbox} from 'react-uikit3';

React.render((
  <Lightbox>
    <Lightbox.Item href='/path/to/image.jpg' caption='Image'>
      Open Image
    </Lightbox.Item>
    <Lightbox.Item href='/path/to/video.mp4' caption='Video'>
      Open Video
    </Lightbox.Item>
  </Lightbox>
), element);

Lightbox attributes

Lightbox.Item attributes

Nav

Official guide

import {Nav} from 'react-uikit3';
import {Link} from 'react-router';

React.render((
  <Nav className='uk-nav-default uk-nav-parent-icon'>
    <li>
      <Link to='/'>One</Link>
    </li>
    <li>
      <Link to='/two'>Two</Link>
    </li>
    <li className='uk-parent'>
      <a>Three</a>
      <ul className='uk-nav-sub'>
        <li>
          <Link to='/sub-one'>Sub One</Link>
        </li>
        <li>
          <Link to='/sub-two'>Sub Two</Link>
        </li>
        <li>
          <Link to='/sub-three'>Sub Three</Link>
        </li>
      </ul>
    </li>
  </Nav>
), element);

NavBar

Official guide

import {NavBar} from 'react-uikit3';
import {Link} from 'react-router';

React.render((
  <NavBar>
    <div className='uk-navbar-left'>
      <ul className='uk-navbar-nav'>
        <li>
          <Link to='/'>One</Link>
        </li>
        <li>
          <Link to='/two'>Two</Link>
        </li>
        <li>
          <Link to='/three'>Three</Link>
          <div className='uk-navbar-dropdown'>
            <ul className='uk-nav uk-navbar-dropdown-nav'>
              <li>
                <Link to='/sub-one'>Sub One</Link>
              </li>
              <li>
                <Link to='/sub-two'>Sub Two</Link>
              </li>
              <li>
                <Link to='/sub-three'>Sub Three</Link>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </NavBar>
), element);

Slideshow

Official guide

import {Slideshow, Cover} from 'react-uikit3';

React.render((
  <Slideshow slidenav={true}>
    <ul className="uk-slideshow-items">
      <li>
        <Cover type="image" src="/path/to/image.jpg" />
      </li>
      <li>
        <Cover type="image" src="/path/to/image.jpg" />
      </li>
      <li>
        <Cover type="image" src="/path/to/image.jpg" />
      </li>
    </ul>
  </Slideshow>
), element);

Icon

Official guide

import {Icon} from 'react-uikit3';

React.render((
  <Icon icon="home" />
), element);

Spinner

Official guide

import {Spinner} from 'react-uikit3';

React.render((
  <Spinner />
), element);