https://github.com/jamilur-r/jr-stepper-form
jr-stepper-form is a stepper form builder component for react. The component is designed keeping ease of use in mind. The library is very easy to use with only 1 imports.
https://github.com/jamilur-r/jr-stepper-form
react react-component-library react-stepper-form react-ui-components stepper-form
Last synced: about 2 months ago
JSON representation
jr-stepper-form is a stepper form builder component for react. The component is designed keeping ease of use in mind. The library is very easy to use with only 1 imports.
- Host: GitHub
- URL: https://github.com/jamilur-r/jr-stepper-form
- Owner: jamilur-r
- Created: 2020-11-25T19:31:30.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-11-25T19:41:54.000Z (over 4 years ago)
- Last Synced: 2025-03-22T12:04:13.021Z (2 months ago)
- Topics: react, react-component-library, react-stepper-form, react-ui-components, stepper-form
- Language: HTML
- Homepage: https://jamilurrahman.com
- Size: 201 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Jr Stepper Form
jr-stepper-form is a stepper form builder component for react. The component is design keeping ease of use in mind. The library is very easy to use with only 1 imports.
The library dosen't have any styles included so it dosen't conflict with your own styles.
# Visit my site @
[My Portfolio](https://jamilurrahman.com/)
>
[](https://www.npmjs.com/package/jr-stepper-form) [](https://standardjs.com)
## Install
```bash
npm install --save jr-stepper-form
```
## Usage
```jsx
import React from 'react'
import { StepperForm } from 'jr-stepper-form'
const App = () => {
const sb = (e) => {
e.preventDefault();
console.log('hello');
}
return (
sb(e)}>
1
2
3
4
5
)
}
export default App
```
## or
```javascript
import React from 'react'
import { StepperForm } from 'jr-stepper-form'
const App = () => {
const sb = (e) => {
e.preventDefault()
console.log('hello')
}
const Step1 = () =>
STEP 1
const Step2 = () => STEP 2
const Step3 = () => STEP 3
const Step4 = () => STEP 4
const Step5 = () => STEP 5
return (
sb(e)}>
)
}
export default App
```
## Props
| name | type | isRequired ? | description | start value |
| ------------ | -------------- | ------------ | ----------------------------------------------------- | ----------- |
| currentStep | number | true | current step number or starting step | 0 |
| submit | callback | true | on submit method | null |
| stepperClass | string | false | class name for stepper for to customize stepper form | ' ' |
| maxStep | number | true | max number of steps | null |
| previousText | any | false | button text for previous button or your own component | 'prevoius' |
| nextText | any | false | button text for next button or your own component | 'next' |
| btnClass | string | false | css class for previous and next button | ' ' |
| children | react children | true | might give error if now children passed | null |
## HELP
### Styling previous and next button
>previous and next buttons are enclosed in
with class name 'btns' as such
```html
handlePrev(e)}
>
{previousText ? previousText : 'Previous'}
handleNext(e)}
>
{nextText ? nextText : 'Next'}
```
### Styling stepper form
>pass stepperClass='style-class' as props to style stepper form
## License
MIT © [Jamilur-rahman-470](https://github.com/Jamilur-rahman-470)
PORTFOLIO @ [Portfolio](https://jamilurrahman.com)