Skip to content

Commit 24787a8

Browse files
aarathyKeyvalueaarathyKeyvalue
authored
Added ReadMe file
2 parents ccd8fcd + 084be9c commit 24787a8

6 files changed

Lines changed: 25699 additions & 35834 deletions

File tree

‎README.md‎

Lines changed: 151 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,174 @@
1-
<div align="center">
2-
<img align="center" width="230" src="https://i.imgur.com/iHgtvmg.png" />
3-
<h2>Typescript Library Boilerplate Basic</h2>
4-
<blockquote>Minimal Library Starter Kit for your Typescript projects</blockquote>
5-
6-
<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>
71

8-
<strong>For a plain Javascript alternative, check out [js-library-boilerplate-basic](https://github.com/hodgef/js-library-boilerplate-basic).</strong>
2+
# 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> -->
95

10-
</div>
6+
7+
>A fully customizable ready to use vertical stepper UI package.
118
12-
## ⭐️ Features
139

14-
- Webpack 5
15-
- Babel 7
16-
- Hot reloading (`npm start`)
17-
- Automatic Types file generation (index.d.ts)
18-
- UMD exports, so your library works everywhere.
19-
- Jest unit testing
20-
- Customizable file headers for your build [(Example 1)](https://github.com/hodgef/ts-library-boilerplate-basic/blob/master/build/index.js) [(Example2)](https://github.com/hodgef/ts-library-boilerplate-basic/blob/master/build/css/index.css)
21-
- Daily [dependabot](https://dependabot.com) dependency updates
10+
## Installation
2211

23-
## 📦 Getting Started
2412

2513
```
26-
git clone https://github.com/hodgef/ts-library-boilerplate-basic.git myLibrary
27-
npm install
14+
npm install react-vertical-stepper
2815
```
16+
You’ll need to install React separately since it isn't included in the package.
2917

30-
## 💎 Customization
18+
## Usage
3119

32-
> Before shipping, make sure to:
20+
React Vertical Stepper can run in a very basic mode by just providing the `steps` and `currentStepIndex` props like this:
21+
```
22+
import Stepper from 'react-vertical-stepper';
23+
24+
<Stepper
25+
steps={stepsArray}
26+
currentStepIndex={currentStepIndex}
27+
/>
28+
```
29+
Here the steps array is an array of objects with basic keys like
3330

34-
1. Edit `LICENSE` file
35-
2. Edit `package.json` information (These will be used to generate the headers for your built files)
36-
3. Edit `library: "MyLibrary"` with your library's export name in `./webpack.config.js`
31+
- `label` - a string that can be shown as step label title to your step indicator
3732

38-
## 🚀 Deployment
33+
- `description` - a string that can be show as step description below the step label
3934

40-
1. `npm publish`
41-
2. Your users can include your library as usual
35+
- `status` - can be provided with any of `visited`, `unvisited`, `completed`. Will be required if you are using default styles.
4236

43-
### npm
37+
> You can also add other keys to the step object and other statuses like `skipped` for different customizations as per requirements
4438
39+
An example for steps array is shown below:
4540
```
46-
import MyLibrary from 'my-library';
47-
const libraryInstance = new MyLibrary();
48-
...
41+
stepsArray = [
42+
{
43+
label: 'Step 1',
44+
description: 'This is Step 1',
45+
status: 'visited'
46+
},
47+
{
48+
label: 'Step 2',
49+
description: 'This is Step 2',
50+
status: 'unvisited'
51+
},
52+
{
53+
label: 'Step 3',
54+
description: 'This is Step 3',
55+
status: 'completed'
56+
}
57+
];
4958
```
59+
You can use `onStepClick` event handler which fires each time you click on a step or its label or description
60+
```
61+
const [activeStepIndex, setActiveStepIndex] = useState(0);
5062
51-
### self-host/cdn
63+
const handleStepClick = (step, stepIndex) => {
64+
setActiveStepIndex(stepIndex);S
65+
};
5266
67+
<Stepper
68+
steps={stepsArray}
69+
currentStepIndex={activeStepIndex}
70+
onStepClick={handleStepClick}
71+
/>
5372
```
54-
<script src="build/index.js"></script>
55-
56-
const MyLibrary = window.MyLibrary.default;
57-
const libraryInstance = new MyLibrary();
58-
...
73+
You can also customize the step indicator bubble with your own DOM element using the `renderBubble` prop
74+
```
75+
<Stepper
76+
steps={stepsArray}
77+
currentStepIndex={currentStepIndex}
78+
renderBubble={(step, stepIndex) => (<div key={stepIndex}>{step.label}</div>)}
79+
/>
5980
```
6081

61-
## ✅ Libraries built with this boilerplate
62-
63-
> Made a library using this starter kit? Share it here by [submitting a pull request](https://github.com/hodgef/ts-library-boilerplate-basic/pulls)!
82+
>Note: The `step` param provided by the `renderBubble` callback is the same object you pass as array item in `steps` prop.
83+
84+
## Props
85+
86+
Props that can be passed to the component are listed below:
87+
88+
<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>
140+
</table>
141+
142+
## Style Customizations
143+
144+
All the default styles provided by this package are overridable using the `style` prop.
145+
the below code shows all the overridable styles:
146+
```
147+
<Stepper
148+
steps={stepsArray}
149+
currentStepIndex={currentStepIndex}
150+
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}),,
160+
}}
161+
/>
162+
```
64163

65-
- [simple-keyboard](https://github.com/hodgef/simple-keyboard) - Javascript Virtual Keyboard
66-
- [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard) - React Virtual Keyboard
67-
- [simple-keyboard-layouts](https://github.com/hodgef/simple-keyboard-layouts) - Keyboard layouts for simple-keyboard
164+
> All the `getXXStyles` functions can be passed optionally using `styles` prop and can be used to override specific css styles to the respective elements.
165+
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

0 commit comments

Comments
 (0)