react-status-timeline

Status timeline for React.js

Demo

https://tranhoandz98.github.io/react-status-timeline/

Install

npm install --save react-status-timeline

Or

yarn add react-status-timeline

Usage

import React, { Component } from 'react'

import StatusTimeLine from 'react-status-timeline'
import 'react-status-timeline/dist/index.css'

const App = () => {
  return <StatusTimeLine/>
}

export default App

User guide

StatusTimeLine

Props

Prop name	Description	Default value	Example values
className	Class name(s) that will be added to rendered element along with the default StatusTimeLine	n/a	String: "class-name-1 class-name-2"
data	Array data status	[{status: 'complete',color: success',stepName: 'Đã xong',statusStep: 'Hoàn thành',step: 'Bước 1',},{status: 'cancel',color: 'danger',stepName: 'Từ chối rồi',statusStep: 'Từ chối',step: Bước 2'}]	Default value
statusCurrent	Current state of the timeline	2	Number: 1
isStart	Show start status default	true	Boolean: true false
isEnd	Show end status default	true	Boolean: true false
onError	Function run when error	n/a	Function: ...
txtStart	Text start status	"Bắt đầu"	String: "Write something"
txtActionStart	Action default start status	"Soạn thảo"	String: "Write something"
txtEnd	Text end status	"Kết thúc"	String: "Write something"
txtActionEnd	Action default end status	"Hoàn thành"	String: "Write something"
captionStep	Caption name + step name - show in title attribute of each step	"Tên bước: "	String: "Write something"
txtStep	Text stand in front of the step	n/a	String: "Write something"
classNameStart	Class name(s) that will be added to render first element along with the default class "timeline__content" if isStart=true	n/a	String: "Write something"
classNameEnd	Class name(s) that will be added to render last element along with the default class "timeline__content" if isEnd=true	n/a	String: "Write something"

Props data

Key	Description	Example values
status	status of step	"complete" "waiting" "cancel"
color	color tags of step	"primary" "success" "info" "warning" "danger"
stepName	Step name - show in title attribute of each step	String: "Write something"
statusStep	Text status	String: "Write something"
step	Action status	String: "Write something"

className

Content	Description	Example values
timeline__tag--none	hide attribute tag with element has class "timeline__content"	className="timeline__tag--none"

License

MIT © tranhoandz98