Thousanday-react NPM

React-Thousanday

A list of reusable React UI components, will update weekly.

Project

Instagram-Like web app for pets by React Instagram-Like mobile app for pets by React Native

Install

npm install thousanday-react --save

Components List

Waterfall: Responsive Pinterest-Stlye Image Gallery Postimg: Post Panel to send message with image Getlocation: Display/Get users' geolocation Delmember: Disapear images with shake effect Inputbox: Text input with characters couting and restriction Inputarea: Textarea with characters couting and restriction Updateprofile: Update profile image Confirmdel: Require user to confirm delete action by input Commentlist: Show and load a list of comments Pickgender: Let user choose a gender Like: Show/Collect like from users Facebooklogin: Button for Facebook Login Googlelogin: Button for Google Login Progress: Show/Update the progress bar Selectbox: Select members from several options Urltoprofile: Turn image from url to canvas for upload Rate: Show/Collect rate form users by stars Random: Show random content from a list of options Droplist: Use a drop down list to make decision

Waterfall

Responsive Pinterest-Stlye Image Gallery Waterfall Example

import {Waterfall} from 'thousanday-react';

//Define an array
let images = [
    ["url/0.jpg", "message0", "http://href0"],
    ["url/1.jpg", "message1", "http://href1"],
    ["url/2.jpg", "message2", "http://href2"],
    ["url/3.jpg", "message3", "http://href3"],
    ["url/4.jpg", "message4", "http://href4"],
    ["url/5.jpg", "message5", "http://href5"],
    ...
];

//Init the component
<Waterfall column="5" image={images} />

Features: 1. Automatically layout all the images based on the “column” param 2. Show related message above each image when mouse hover. Params:

Postimg

Post Panel to send message with image Postimg Example

import {Postimg} from 'thousanday-react';

//Init the component
<Postimg content="" max="150" title="New post" submitImg={this.submitImg.bind(this)} reset={this.state.reset} />
//Define this.state.reset as 0
this.state = {
    //use to trigger reset Postimg
    reset: 0,
};
//Get the new post content and img by a function
submitImg(message, img) {
    console.log(message);
    console.log(img);
    //Then send by ajax to backend
    //If success, update this.state.reset to clear message and image of this component
    let reset = this.state.reset + 1;
    this.setState({reset: reset});
}

Features: 1. Automatically calc and restrict user's input according to "max" param 2. Show error message when there's no content or no image or file type is not image. 3. Preview selected image

Notice: This component used a GLYPHICONS png under CC BY 3.0 License Reference

Params:

Getlocation

Display/Get users' geolocation. getlocation Idea Example

import {Getlocation} from 'thousanday-react';

//Init the component for display location only by define display="true"
<Getlocation center={[0,0]} zoom="1" display="true" />

//Init the component to get users' location
<Getlocation center={[-79, 43]} saveLocation={this.saveLocation.bind(this)} />
//Get new coordinate stand for user's location by a function
saveLocation(coordinate) {
	console.log(coordinate);
    //update db
}

Features: 1. zoom in, zoom out, get location by GPS 2. Preset zoom level for display 3. Return coordinate (lon, lat) stand for user's location

Notice: The map service is depend on openlayers under BSD License Chrome and android require https for GPS locate feature

Params:

Delmember

Disapear images with shake effect delmember Example

import {Delmember} from 'thousanday-react';

//Init components with clickDel function and index
<Delmember profile={"0.jpg"} index={0} clickDel={this.clickDel.bind(this)} />
<Delmember profile={"1.jpg"} index={1} clickDel={this.clickDel.bind(this)} />
//Create clickDel function to get index of the image has been clicked by users
clickDel(index) {
	console.log(index);
    //update db according to index
}

Features: 1. Show a delete button on top-right corner of the image 2. Image shakes after users click it then diaspear 3. Return index to indicate which image has been clicked

Params:

Inputbox

Text input with characters couting and restriction Inputbox Simple Example

import {Inputbox} from 'thousanday-react';

//Init component with ref name
<Inputbox ref="newInput" content="" max="150" />
//Get the content from any function
submitInput(){
    console.log(this.refs.newInput.state.content);//this is users new input
}
<button onClick={this.submitInput.bind(this)} />

Features: 1. Counting input characters 2. Restrict input after reaching maximun characters

Params:

Inputarea

Textarea with characters couting and restriction Inputarea Simple Example

import {Inputarea} from 'thousanday-react';

//Init this component with ref name
<Inputarea ref="newInput" content="" max="300" />
//Get the input content from any function
submitInput(){
    console.log(this.refs.newInput.state.content);
}
<button onClick={this.submitInput.bind(this)} />

Features: 1. Counting inputarea characters 2. Restrict input after reaching maximun characters

Params:

Updateprofile

Update profile image. updateprofile Example

import {Updateprofile} from 'thousanday-react';

//Init component with saveProfile function
<Updateprofile src="url/profile.png" width="200" saveProfile={this.saveProfile.bind(this)} />
saveProfile(finalUrl) {
    let formData = new FormData();
	formData.append('file', finalUrl, "profile_name.png");
	reqwest({
		url: "/upateProfile",
		method: "POST",
		data: formData,
		contentType: false,
		processData: false
	});
}

Features: 1. Show new profile image 2. Return new profile image information which could send and save to backend Notice: The image crop function is realized by react-avatar-editor under MIT Params:

Confirmdel

Require user to confirm delete action by input confirmdel Example

import {Confirmdel} from 'thousanday-react';

//init component with a confirm message and confirmDel function
<Confirmdel message="End Relationship" confirmDel={this.confirmDel.bind(this)} />
//Whenever user inputed the same confirm message and click confirm delete
conformDel() {
   //any follow up actions
}

Features: 1. Require users to input the preset confirm message 2. Confirm button only available after the input is the same 3. Get call back when users click confirm button

Params:

Commentlist

Show and load a list of comments commentlist Example

import {Commentlist} from 'thousanday-react';

//prepare nested array contains comment information
let comments = [
    ["content 1", "avatar src 1", "avatar href 1", "comment time 1"],
    ["content 2", "avatar src 2", "avatar href 2", "comment time 2"],
    ["content 3", "avatar src 3", "avatar href 3", "comment time 3"],
    ......
];
this.state = {comments: comments}
//Leave load more locker as on
this.state = {locker: "off"}
//init component width comments
<Commentlist data={this.state.comments} locker={this.state.locker} loadMore={this.loadComment.bind(this)} />
//use a function to load more comment
loadComment() {
    //get new comments from ajax
    let newComments = this.state.comments.concat(ajaxResult);
    this.setState({comments: newComments});
    //To disable load more function
    this.setState({locker: "on"});
}

Features: 1. Show a list of comments based on init data 2. Catch load more events

Params:

pickgender

Let user pick a gender Pickgender Example

import {Pickgender} from 'thousanday-react';

//init component with chooseGender function
 <Pickgender chooseGender={this.chooseGender.bind(this)} />
//Get user's choice by chooseGender function
chooseGender(choice) {
  console.log(choice);
  //0 for male, 1 for female, 2 for no choice
}

Features: 1. Display male and female symbol 2. Return user's choice after click

Params:

Like

Show/Collect like from users Like Example

import {Like} from 'thousanday-react';

//init component with newTotal function
<Like agree={this.state.like} newTotal={this.updateLike.bind(this)}/>
//Get +1 or -1 based on users action
updateLike(change) {
  let like = this.state.like;
  this.setState({like: like + change});
}

Features: 1. Show total like numbers 2. Change total like numbers based on users action

Params:

Facebooklogin

Button for Facebook Login flogin Example

import {Facebooklogin} from 'thousanday-react';

//Get your google client id
let id = "Your facebook client id";
//init component
<Facebooklogin clientId={id} fLogin={this.fLogin.bind(this)}/>
//Get users info by fLogin Function
fLogin(user, token) {
  console.log(user);
  console.log(token);
}

Features: 1. Show Facebook Login button 2. Get users information, and token after login successfully

Params:

Googlelogin

Button for Google Login glogin Example

import {Googlelogin} from 'thousanday-react';

//Get your google client id
let id = "Your google client id";
//init component
<Googlelogin clientId={id} gLogin={this.gLogin.bind(this)}/>
//Get users info by gLogin Function
gLogin(user) {
  console.log(user);
  //user.id, user.name, user.firstname, user.lastname, user.imageUrl, user.email, user.token
}

Features: 1. Show Google Login button 2. Get users information after login successfully

Params:

Progress

Show/Update the progress bar Example

import {Progress} from 'thousanday-react';

//Init progress bar show progress by percentage
<Progress progress={this.state.progress} max="100" />
//Init progress bar set percentage="false" show progress by value
<Progress progress={this.state.progress} max="100" percentage="false" />

Features: 1. Show progress by percentage or value

Params:

Selectbox

Select members from several options Progress Example

import {Selectbox} from 'thousanday-react';

//Prepare an array of members you want to display as options
let members = [
    ["member name 1", "image_src_1.jpg", "message1"],
    ["member name 2", "image_src_2.jpg", "message2"],
    ["member name 3", "image_src_3.jpg", "message3"],
    ...
]
//init component, which allow users choose 2 members
<Selectbox options={members} max="2" closeBox={this.closeTeam.bind(this)}  />
//init component with preset choice (members with index 0, 1 in the members array)
<Selectbox options={members} max="2" decisions={[0,1]} closeBox={this.closeBox.bind(this)}  />

//Catch user's closebox action
closeBox(newDecision, changed) {
    //newDecision is the array which contains users choice
    if (newDecision.length > 0) {
		firstChoice = members[newDecision[0]][3];
	}
	if (newDecision.length > 1) {
		secondChoice = members[newDecision[1]][3];
	}
    //changed stand for if users changed their choice
    if (changed) {
        //update db, close box
    } else {
        //do nothing, close box
    }
}

Features: 1. Show list of options with name, profile, message from an array 2. Return index of members in the option array, after users confirm choice 3. Know if users changed their default choice Params:

Urltoprofile

Turn image url into canvas for upload urltoprofile Example

import {Urltoprofile} from 'thousanday-react';

//Get user image url from social website
let url = "http://..........";
//Display user's image
<Urltoprofile ref="image" url={url} />
//use a function to send image to backend
saveProfile() {
    let file = this.refs.image.state.data;
    console.log(file);
}

Features: 1. Display user image from social website 2. Turn image from url into data could be send and save to backend

Params:

Rate

Show/Collect rate form users by stars Rating Example

import {Rate} from 'thousanday-react';

//Init component by define interact="true" with rateChange function
<Rate rate={this.state.currentRate} max="5" interact="true" rateChange={this.rateChange.bind(this)} />
//Update to new rate by rateChange function
rateChange(rateNum){
    this.setState({currentRate:rateNum});
}

//Init a display only rate
<Rate rate = "3" max = "5" />

Features: 1. Show rate by stars 2. Update rate after user add/update a new rate

Params:

Random

Show random content from a list of options Random Example

import {Random} from 'thousanday-react';

//Define a list of content in array
let randomContent = ["Slogan 1", "Slogan 2", "Slogan 3"];
//Init the component with the array
<Random random={randomContent} font="h3" />

Features: 1. Randomly show content based on list of options 2. Insert content into a desired html tag

Params:

Droplist

Use drop-down list to make decision Droplist Example

import {Droplist} from 'thousanday-react';

//Define a list of options in array
let options = ["Choice 1", "Choice 2", "Choice 3"];
//Init the component with the array
<Droplist options={options} title="Choose your option" showTitle="true" changeValue={this.getDecision.bind(this)}  
//get users' decision by function
getDecision(value) {
    console.log(value)
}

Features: 1. Show a list of options in drop-down list 2. Return choice chosen by users

Params: