mu29 / react-stepper Goto Github PK

View Code? Open in Web Editor NEW

120.0 4.0 97.0 128 KB

Well-designed stepper component for react

License: MIT License

JavaScript 99.29% HTML 0.71%

react react-component stepper stepper-component

react-stepper's Introduction

react-stepper

Well-designed stepper component for react

Installation

npm install react-stepper-horizontal --save

Then just add import Stepper from 'react-stepper-horizontal'; into your file.

Screenshot

Usage

render() {
  return (
    <div>
      <Stepper steps={ [{title: 'Step One'}, {title: 'Step Two'}, {title: 'Step Three'}, {title: 'Step Four'}] } activeStep={ 1 } />
    </div>
  );
}

See full example here

API

Main Component

name	description	default	type
activeStep	Active step index, starts at 0	0	number
steps	List of step objects (see below)		array
activeColor	Active circle color	#5096FF	string
completeColor	Completed circle color	#5096FF	string
defaultColor	Default circle color - not active or completed	#E0E0E0	string
activeTitleColor	Active title color	#000	string
completeTitleColor	Completed title color	#000	string
defaultTitleColor	Default title color - not active or completed	#757575	string
circleFontColor	Circle text color (for index)	#FFF	string
size	Circle size	32	number
circleFontSize	Circle text size	16	number
titleFontSize	Title text size	16	number
circleTop	Top margin of `Stepper` component	24	number
titleTop	Space between circle and title	8	number
defaultOpacity	Default circle opacity	1	string
completeOpacity	Completed circle opacity	1	string
activeOpacity	Active circle opacity	1	string
defaultTitleOpacity	Default title opacity	1	string
completeTitleOpacity	Completed title opacity	1	string
activeTitleOpacity	Active title opacity	1	string
barStyle	Style of bar separating steps	solid	string
defaultBorderColor	Default color of border surrounding circle		string
completeBorderColor	Color of border surrounding completed circle		string
activeBorderColor	Color of border surrounding active circle		string
defaultBorderStyle	Default style of border surrounding circle	solid	string
completeBorderStyle	Style of border surrounding completed circle	solid	string
activeBorderStyle	Style of border surrounding active circle	solid	string
defaultBarColor	Default color of bar separating circles	#E0E0E0	string
completeBarColor	Color of bar connected to a completed step	#E0E0E0	string
lineMarginOffset	Offset for line margin	4	number
defaultBorderWidth	Default Border Width	3	number

Step Objects

name	description	default	type
title	Displayed text of the step below the number	undefined	string
icon	Displayed icon of the step	undefined	image/object
href	Link to send them to on click	undefined	string
onClick	Event handler for when the step is clicked	undefined	function

Author

InJung Chung / @mu29

License

MIT

react-stepper's People

Contributors

Stargazers

Watchers

Forkers

jlebensold ninjakttty vpolotskiy claytn trabian jlusthaus vedranserences georgelima chiragchandak andy9775 parth7676 lakshitaverma elquimista wbobeirne daviscabral sponsology saichandesh shirindanp sangeethakalluri mubarakcolan yzhao583 zbuttram basavarajk marykattyvo sailsea voice-apps shyamkshr2 alpakyol maxsd james-lukensow heiwais25 shilpisaxena1203 anuragtiwari1 codelakegmbh cedriclphn amritksingh cmmadnat mariarodrigu atipezda riagh0sh vinaybetabulls gbrvalerio sharepointpro vijay94 ad-hok santana125 mrteale mkmlh mayur-padshala tobiaswsmith rheajt roshan-shelar 11112256 jctubio reni11111 apptitude-apps pteyssedre gordonwho alealem gazmi82 chkob elinclan junqueror giangdn kzoltan29 gghjugdev koushik-ui woven-teams mquantin mathildamonni fan jhammond2012 kelly-hansen fatimashekh vyasparth rishi-garg97 cecgsnav angulemathias siddjain rameswar1234 copy-ninja1 abdulelrahwan mwsoofy martykan danilliptuga codenameramesh vhall1 gbhrdt kehindebankole ramprasathmuthuraj nakicamaqka jsdude0220 stepbystepsoftware dmccoy-nl

react-stepper's Issues

customise aspect of steps and content of steps

Say I don't want completed steps to be coloured in full but only have a border coloured.

also Would like to replace numbers inside the steps with custom icons. Is this possible ?

Customize stepper: In step array, beyond the title, add an icon for each step

onClick and href attributes only work on active/completed steps

Hi, thanks for the great work, I cant set those attributes on non-active steps. Is this intentional?

feature, completeTitleText, defaultTitleText, activeTitleText

accept on array of steps the title of circle, could be icons too

Change Title Font Weight and Title Cursor Pointer by false?

Customizing CSS of the Stepper

@mu29
Hi,
Thanks for this stepper component. The thing I wanted to do with my stepper is customizing the CSS.
My requirements:

Text Title to appear to the right of the circle rather than at the bottom
Making the Text Title bolder
Steps text and circle to appear to the left of the div rather than in the center

Based on the above, could you please add the properties in CSS.

Note: It would be great to customize CSS using the regular CSS properties rather than limited to using the API properties.

Thank you! Looking forward to your response.

Click event is on text of circle not on whole circle

Line Height Issues

The line height of the number inside the circle is not always calculated correctly as some fonts have weird spaces. Can we get a line height offset prop that allows us to easily correct this for font's that have weird padding?

Module not found: Error: Cannot resolve module 'react-stepper-horizontal'

Module not found: Error: Cannot resolve module 'react-stepper-horizontal' . I am getting this error. even though i am importing it properly

import Stepper from 'react-stepper-horizontal';

style ist not loading?

This is how my stepper looks like:
I am using the code from example. What i am doing wrong?

feature request: support component as `title` value

It would be nice if the step title could officially support arbitrary components rather than just strings, for instance to support simple icons (like font awesome) as part of the title.

For example:

title: (
    <span>
        <i class="fa fa-smile-o" />
        Hello
    </span>
)

It technically works now, but I get the warning:
Failed prop type: Invalid prop `title` of type `object` supplied to `Step`, expected `string`.

not support in ie browser

Objects are not vaild as React child (found : object with keys {$$typeof,type,key, ref,props,_owner,_store}) in ie browser

Different behavior on RTL languages

Thanks for making this, I'm currently trying to make it work with rtl languages such as Hebrew and Arabic, If I could have access to the isLast, first and completed props from the Step component, I could maybe find a work around for it.

Is there a possibility to do this?

Fix react validator warnings

There are bunch of warnings in the web console. Could you fix it?

Warning: Failed prop type: Step: prop type active is invalid; it must be a function, usually from React.PropTypes. in Step (created by Stepper)...

Warning: Failed prop type: Step: prop type completed is invalid; it must be a function, usually from React.PropTypes. in Step (created by Stepper)...

Warning: Failed prop type: Step: prop type first is invalid; it must be a function, usually from React.PropTypes. in Step (created by Stepper)...

Warning: Failed prop type: Step: prop type last is invalid; it must be a function, usually from React.PropTypes. in Step (created by Stepper)...

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Stepper. See https://fb.me/react-warning-keys for more information. in Step (created by Stepper)...

Vertical Stepper?

HI @mu29, do you have a vertical version of this component?

Thanks!