Skip to content

Commit 9f95a84

Browse files
GokulSNathGokulSNath
committed
updated readme file with new style customisation props
1 parent e84830b commit 9f95a84

1 file changed

Lines changed: 75 additions & 77 deletions

File tree

‎README.md‎

Lines changed: 75 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11

22
# React Vertical Stepper
3-
<!--
4-
<a href="https://www.npmjs.com/package/@hodgef/ts-library-boilerplate-basic"><img src="https://badgen.net/npm/v/@hodgef/ts-library-boilerplate-basic?color=blue" alt="npm version"></a> <a href="https://github.com/hodgef/ts-library-boilerplate"><img src="https://img.shields.io/github/last-commit/hodgef/ts-library-boilerplate" alt="latest commit"></a> <a href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"><img alt="Build Status" src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Build/badge.svg?color=green" /></a> <a href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"> <img alt="Publish Status" src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Publish/badge.svg?color=green" /></a> -->
53

6-
7-
>A fully customizable ready to use vertical stepper UI package.
4+
<!--
5+
<a href="https://www.npmjs.com/package/@hodgef/ts-library-boilerplate-basic"><img src="https://badgen.net/npm/v/@hodgef/ts-library-boilerplate-basic?color=blue" alt="npm version"></a> <a href="https://github.com/hodgef/ts-library-boilerplate"><img src="https://img.shields.io/github/last-commit/hodgef/ts-library-boilerplate" alt="latest commit"></a> <a href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"><img alt="Build Status" src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Build/badge.svg?color=green" /></a> <a href="https://github.com/hodgef/ts-library-boilerplate-basic/actions"> <img alt="Publish Status" src="https://github.com/hodgef/ts-library-boilerplate-basic/workflows/Publish/badge.svg?color=green" /></a> -->
86

7+
>A fully customizable ready to use vertical stepper UI package.
98
109
## Installation
1110

12-
1311
```
1412
npm install react-vertical-stepper
1513
```
14+
1615
You’ll need to install React separately since it isn't included in the package.
1716

1817
## Usage
@@ -29,14 +28,13 @@ import Stepper from 'react-vertical-stepper';
2928
Here the steps array is an array of objects with basic keys like
3029

3130
- `label` - a string that can be shown as step label title to your step indicator
32-
3331
- `description` - a string that can be show as step description below the step label
34-
3532
- `status` - can be provided with any of `visited`, `unvisited`, `completed`. Will be required if you are using default styles.
3633

3734
> You can also add other keys to the step object and other statuses like `skipped` for different customizations as per requirements
3835
3936
An example for steps array is shown below:
37+
4038
```
4139
stepsArray = [
4240
{
@@ -61,7 +59,7 @@ You can use `onStepClick` event handler which fires each time you click on a ste
6159
const [activeStepIndex, setActiveStepIndex] = useState(0);
6260
6361
const handleStepClick = (step, stepIndex) => {
64-
setActiveStepIndex(stepIndex);S
62+
setActiveStepIndex(stepIndex);
6563
};
6664
6765
<Stepper
@@ -86,57 +84,57 @@ You can also customize the step indicator bubble with your own DOM element using
8684
Props that can be passed to the component are listed below:
8785

8886
<table>
89-
<thead>
90-
<tr>
91-
<th>Prop</th>
92-
<th>Description</th>
93-
<th>Default</th>
94-
</tr>
95-
</thead>
96-
<tbody>
97-
<tr>
98-
<td><code><b>steps:</b> object[]</code></td>
99-
<td>
100-
An array of step objects to render.
101-
</td>
102-
<td><code>undefined</code></td>
103-
</tr>
104-
<tr>
105-
<td><code><b>currentIndex:</b> number</code></td>
106-
<td>
107-
The index of current active step.
108-
</td>
109-
<td>0</td>
110-
</tr>
111-
<tr>
112-
<td><code><b>onStepClick?:</b> (step: object, stepIndex: number): void</code></td>
113-
<td>
114-
A step click handler that fires each time you click on a step, its label or its description.
115-
</td>
116-
<td><code>undefined</code></td>
117-
</tr>
118-
<tr>
119-
<td><code><b>renderBubble?:</b> (step: object, stepIndex: number): ReactElement</code></td>
120-
<td>
121-
A render function to customize your step indicator with your own element.
122-
</td>
123-
<td><code>undefined</code></td>
124-
</tr>
125-
<tr>
126-
<td><code><b>labelPosition?:</b> 'left' | 'right'</code></td>
127-
<td>
128-
Allows you to align step label and description to either <code>left</code> or <code>right</code> of step indicator
129-
</td>
130-
<td><code>right</code></td>
131-
</tr>
132-
<tr>
133-
<td><code><b>styles?:</b> object</code></td>
134-
<td>
135-
Provides you with a bunch of callback functions to override the default styles.
136-
</td>
137-
<td><code>undefined</code></td>
138-
</tr>
139-
</tbody>
87+
<thead>
88+
<tr>
89+
<th>Prop</th>
90+
<th>Description</th>
91+
<th>Default</th>
92+
</tr>
93+
</thead>
94+
<tbody>
95+
<tr>
96+
<td><code><b>steps:</b> object[]</code></td>
97+
<td>
98+
An array of step objects to render.
99+
</td>
100+
<td><code>undefined</code></td>
101+
</tr>
102+
<tr>
103+
<td><code><b>currentIndex:</b> number</code></td>
104+
<td>
105+
The index of current active step.
106+
</td>
107+
<td>0</td>
108+
</tr>
109+
<tr>
110+
<td><code><b>onStepClick?:</b> (step: object, stepIndex: number): void</code></td>
111+
<td>
112+
A step click handler that fires each time you click on a step, its label or its description.
113+
</td>
114+
<td><code>undefined</code></td>
115+
</tr>
116+
<tr>
117+
<td><code><b>renderBubble?:</b> (step: object, stepIndex: number): ReactElement</code></td>
118+
<td>
119+
A render function to customize your step indicator with your own element.
120+
</td>
121+
<td><code>undefined</code></td>
122+
</tr>
123+
<tr>
124+
<td><code><b>labelPosition?:</b> 'left' | 'right'</code></td>
125+
<td>
126+
Allows you to align step label and description to either <code>left</code> or <code>right</code> of step indicator
127+
</td>
128+
<td><code>right</code></td>
129+
</tr>
130+
<tr>
131+
<td><code><b>styles?:</b> object</code></td>
132+
<td>
133+
Provides you with a bunch of callback functions to override the default styles.
134+
</td>
135+
<td><code>undefined</code></td>
136+
</tr>
137+
</tbody>
140138
</table>
141139

142140
## Style Customizations
@@ -148,27 +146,27 @@ the below code shows all the overridable styles:
148146
steps={stepsArray}
149147
currentStepIndex={currentStepIndex}
150148
styles={{
151-
getLabelTitleStyles: (step, stepIndex) => ({...styles}),
152-
getActiveLabelTitleStyles: (step, stepIndex) => ({...styles}),,
153-
getLabelDescriptionStyles: (step, stepIndex) => ({...styles}),,
154-
getActiveLabelDescriptionStyles: (step, stepIndex) => ({...styles}),,
155-
getLineSeparatorStyles: (step, stepIndex) => ({...styles}),,
156-
getInactiveLineSeparatorStyles: (step, stepIndex) => ({...styles}),,
157-
getBubbleStyles: (step, stepIndex) => ({...styles}),,
158-
getActiveBubbleStyles: (step, stepIndex) => ({...styles}),,
159-
getInActiveBubbleStyles: (step, stepIndex) => ({...styles}),,
149+
LabelTitle: (step, stepIndex) => ({...styles}),
150+
ActiveLabelTitle: (step, stepIndex) => ({...styles}),
151+
LabelDescription: (step, stepIndex) => ({...styles}),
152+
ActiveLabelDescription: (step, stepIndex) => ({...styles}),
153+
LineSeparator: (step, stepIndex) => ({...styles}),
154+
InactiveLineSeparator: (step, stepIndex) => ({...styles}),
155+
Bubble: (step, stepIndex) => ({...styles}),
156+
ActiveBubble: (step, stepIndex) => ({...styles}),
157+
InActiveBubble: (step, stepIndex) => ({...styles}),
160158
}}
161159
/>
162160
```
163161

164162
> All the `getXXStyles` functions can be passed optionally using `styles` prop and can be used to override specific css styles to the respective elements.
165163
166-
- `getLabelTitleStyles` - overrides the step label style
167-
- `getActiveLabelTitleStyles` - overrides the step label style of current active step
168-
- `getLabelDescriptionStyles` - overrides the step description style
169-
- `getActiveLabelDescriptionStyles` - overrides the step description style of current active step
170-
- `getLineSeparatorStyles` - overrides default step connector line styles
171-
- `getInactiveLineSeparatorStyles` - overrides styles of step connector line after current active step
172-
- `getBubbleStyles` - overrides default styles of step indicator
173-
- `getActiveBubbleStyles` - overrides default styles of step indicator of current active step
174-
- `getInActiveBubbleStyles` - overrides default styles of step indicator that has `unvisited` step status
164+
- `LabelTitle` - overrides the step label style
165+
- `ActiveLabelTitle` - overrides the step label style of current active step
166+
- `LabelDescription` - overrides the step description style
167+
- `ActiveLabelDescription` - overrides the step description style of current active step
168+
- `LineSeparator` - overrides default step connector line styles
169+
- `InactiveLineSeparator` - overrides styles of step connector line after current active step
170+
- `Bubble` - overrides default styles of step indicator
171+
- `ActiveBubble` - overrides default styles of step indicator of current active step
172+
- `InActiveBubble` - overrides default styles of step indicator that has `unvisited` step status

0 commit comments

Comments
 (0)