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: truefalse| isEnd|Show end status default| true|Boolean: truefalse| 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