react-tri-button

react-tri-button

Component with triple state

Demo

준비중...

Install

$ npm install react-tri-button --save

or 

$ yarn install react-tri-button

Scripts

build

npm run build

Components

• Pending Button
• [WIP] Tri Button
• [WIP] Tri Checkbox

Pending Button

If you fetching whne you clicked button, clicked button is going to unclickable and come back finishing fetching.

Props

• timeout
• fetchingText
• successText
• failText
• fetchMode
• logging

props	description	type	isRequired / default
timeout	fetching 과정중, timeout에서 지정한 시간이 지난 후에도 fetching이 되지 않은경우 fetching을 종료하고, 실패로 처리한다.	number (milisecond)	false / 0
fetchingText	fetch 중에 있을때 표시되는 text	string	false / ''
successText	fetch가 성공했을때 표시되는 text	string	false / ''
failText	fetch가 성공했을때 표시되는 text	string	false / ''
fetchMode	fetch를 순차적으로 할지, 비동기로 할지 결정	enum ('sequence', 'inconsecutive')	false / 'sequence'
logging	logging 한다.	boolean	false / false

Event

• onStateChanged
• onFetching
• onError
• onSuccess
• onFail
• onProcess

Tri-Button

Tri-Checkbox

Tri-Checkbox has 3-state. unchecked, checked and intermediate.

Props

• checked
• indeterminate
• checkingText
• uncheckingText
• intermediatingText
• propagation
• (WIP) checkedIcon

props	description	type	isRequired / default
checked	체크박스 체크여부	boolean	false / false
indeterminate	제 3의 상태	boolean	''
checkingText		string	''
uncheckingText		string	''
intermediatingText		enum ('sequence', 'inconsecutive')	false / 'sequence'
propagation	상위나 하위의 체크박으로 인해 자신이 전파를 받는지 여부	boolean	false / true
checkedIcon		boolean	false / false

Event

• onChange

Form

Event

• onSubmit

Usage

import React from 'react'
import {PendingButton} from 'react-tri-button'

class App extends React.Component {

  render () {
    return (
      <PendingButton onFetching={this.onFetchingList} onError={this.onError} onSuccess={this.onSuccess}>
        Pending Button
      </PendingButton>
    )
  }
}

License

react-tri-button is MIT licensed.