Components

Input with autocomplete

Check moroshko/react-autosuggest.

class AutocompleteExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: '',
      suggestions: [
        { text: 'John' },
        { text: 'Paul' },
        { text: 'George' },
        { text: 'Ringo' },
      ],
    };

    this.engine = new Fuse(this.state.suggestions, { keys: ['text'] });

    this.handleChange = this.handleChange.bind(this);
    this.handleSuggestionsFetchRequested = this.handleSuggestionsFetchRequested.bind(this);
  }

  handleChange(e, { newValue: value, method }) {
    if (method === 'escape') return;

    this.setState({ value });
  }

  handleSuggestionsFetchRequested({ value }) {
    this.setState({
      suggestions: this.engine.search(value),
    });
  }

  render() {
    const { value, suggestions } = this.state;

    return (
      <Autocomplete
        inputProps={{
          value,
          onChange: this.handleChange,
          type: 'text',
        }}
        suggestions={suggestions}
        onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
      />
    );
  }
}
javascript

Back to top

Back to top button

<BackToTop />
javascript

Carousel

<Carousel slidesToShow={3} slidesToScroll={3}>
  <div className='carousel__item'>
    <a className='thumbnail'>
      <CroppedImage image='http://loremflickr.com/640/480/cat' ratio='16x9' />
      <div className='caption'>
        <h3>Carousel 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </a>
  </div>
  <div className='carousel__item'>
    <a className='thumbnail'>
      <CroppedImage image='http://loremflickr.com/640/480/kitten' ratio='16x9' />
      <div className='caption'>
        <h3>Carousel 2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </a>
  </div>
  <div className='carousel__item'>
    <a className='thumbnail'>
      <CroppedImage image='http://loremflickr.com/640/480/kitty' ratio='16x9' />
      <div className='caption'>
        <h3>Carousel 3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </a>
  </div>
  <div className='carousel__item'>
    <a className='thumbnail'>
      <CroppedImage image='http://loremflickr.com/640/480/dog' ratio='16x9' />
      <div className='caption'>
        <h3>Carousel 4</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </a>
  </div>
  <div className='carousel__item'>
    <a className='thumbnail'>
      <CroppedImage image='http://loremflickr.com/640/480/puppy' ratio='16x9' />
      <div className='caption'>
        <h3>Carousel 5</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </a>
  </div>
</Carousel>
javascript

Cropped Image

Crop 4 by 3

<CroppedImage image='http://loremflickr.com/400/400/cat,animal/all' ratio='4x3' />
javascript

Crop 16 by 9

<CroppedImage image='http://loremflickr.com/400/300/dog,animal/all' ratio='16x9' />
javascript

Crop 1 by 1

<CroppedImage image='http://loremflickr.com/400/300/owl,animal/all' ratio='1x1' />
javascript

Flash

Usage

class FlashTrigger extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showFlash: false,
    }

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ showFlash: true });
  }

  render() {
    return (
      <div>
        <button className='btn btn-primary' onClick={this.handleClick}>Launch Flash</button>
        <Flash show={this.state.showFlash} messages={['Flash message']} />
      </div>
    );
  }
}
javascript

Props

show: {bool} - default: false

If true, display Flash component.

messages: {(string|number|array)} - default: []

Messages in Flash component.
If you passed message of array, message are splited new line.

dismiss: {bool} - default: true

If true, dismiss Flash automatically for shownTime.

shownTime: {number} - default: 5000

Time to display Flash component.

state: {'success'|'info'|'warning'|'danger'} - default: null

Flash states.

onClose: {function} - default: null

Close callback.

onOpen: {function} - default: null

Open callback.

onUpdate: {function} - default: null

Update callback.

Gallery

Using react-photoswipe.

Image Gallery

<Gallery
  visibleCount={4}
  itemClass='col-sm-3 col-xs-6'
  galleryClass='row'
  images={[
    {src: "http://lorempixel.com/900/600/nightlife/1", thumbnail: "http://lorempixel.com/90/60/nightlife/1", title: "title 1", w: 900, h: 600},
    {src: "http://lorempixel.com/140/120/nightlife/2", title: "title 2", w: 140, h: 120},
    {src: "http://lorempixel.com/800/750/nightlife/3", title: "title 3", w: 800, h: 750},
    {src: "http://lorempixel.com/140/120/nightlife/4", title: "title 4", w: 140, h: 120},
    {src: "http://lorempixel.com/800/600/nightlife/5", title: "title 5", w: 800, h: 600}
  ]}
/>
javascript

Props

images: {src: string, thumbnail: string, title: string, w: number, h: number}

List of image object.

  • src: image url
  • thumbnail: thumbnail url
  • title: image title
  • w: image width
  • h: image height

visibleCount: {number} - default: 4

Number of display thumbnails.

itemClass: {string}

Gallery item css class.

galleryClass: {string}

Wrapper css class.

Notice Bar

<NoticeBar>
  notice text
</NoticeBar>
javascript

Spinner

<Spinner spin={true} message='Now Loading...' cssClass='text-muted' />
javascript

Sub Navigation

Basic

<Subnav>
  <SubnavLink href='#' className='text-muted'>Home</SubnavLink>
  <SubnavLink href='#'>Menu</SubnavLink>
  <SubnavLink href='#'>Menu</SubnavLink>
  <SubnavLink href='#'>Menu</SubnavLink>
  <span>Text</span>
  <SubnavLink><button type='button' className='btn btn-primary'>Button</button></SubnavLink>
</Subnav>
javascript

Props

props.justify

Type: Boolean

justified style.
See subnav module

props.inverse

Type: Boolean

inversed style.
See subnav module

Tags

<Tag value='amazon-web-services' onRemove={() => console.log('remove tag')} />
javascript

Props

props.value

Type: String

Text for the tag.

props.onRemove

Type: Function

Called when close tag.