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.