srdjan / React Multistep
Licence: mit
React multistep form component
Stars: ✭ 473
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Multistep
Formiz
🐜 React forms with ease! Composable, headless & with built-in multi steps
Stars: ✭ 159 (-66.38%)
Mutual labels: forms, wizard
Rsfloatinputview
A Float Input View with smooth animation and supporting icon and seperator written with Swift
Stars: ✭ 103 (-78.22%)
Mutual labels: ui-components, forms
Quick Free Bootstrap Theme
Free Bootstrap 4 Theme perfect for building responsive, mobile-first projects on the web suitable for businesses, startups, and agencies.
Stars: ✭ 31 (-93.45%)
Mutual labels: ui-components, responsive
Rsformview
A Cocoapods library designed to easily create forms with multiple data entry fields
Stars: ✭ 84 (-82.24%)
Mutual labels: ui-components, forms
Numl
A UI Design Language, WC UI Library, and Runtime CSS Framework for rapidly building interfaces that follow your Design System 🌈
Stars: ✭ 229 (-51.59%)
Mutual labels: ui-components, responsive
React Workshop
⚒ 🚧 This is a workshop for learning how to build React Applications
Stars: ✭ 114 (-75.9%)
Mutual labels: forms, jsx
Devextreme
HTML5 JavaScript Component Suite for Responsive Web Development
Stars: ✭ 1,385 (+192.81%)
Mutual labels: ui-components, responsive
Vaadin Form Layout
The Web Component providing configurable responsive layout for form elements. Part of the Vaadin components.
Stars: ✭ 15 (-96.83%)
Mutual labels: forms, responsive
Startup Landing
Collection of free top of the line startup landing templates built using react/nextjs/gatsby. Free to download, simply edit and deploy! Updated weekly!
Stars: ✭ 176 (-62.79%)
Mutual labels: ui-components, responsive
Paper Kit 2 Angular
Free Bootstrap 4 UI Kit for Angular 2+
Stars: ✭ 133 (-71.88%)
Mutual labels: ui-components, responsive
Jafar
🌟!(Just another form application renderer)
Stars: ✭ 107 (-77.38%)
Mutual labels: ui-components, forms
React Components By Ruvkr
A collection of Responsive Animated Mobile friendly Lightweight React Components
Stars: ✭ 319 (-32.56%)
Mutual labels: ui-components, responsive
forms-wizard
🎩 Easy to use step-by-step form for Nette Framework
Stars: ✭ 14 (-97.04%)
Mutual labels: forms, wizard
Formsfx
A framework for easily creating forms for a JavaFX UI.
Stars: ✭ 380 (-19.66%)
Mutual labels: ui-components, forms
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (-3.59%)
Mutual labels: ui-components
Css Element Queries
CSS Element-Queries aka Container Queries. High-speed element dimension/media queries in valid css.
Stars: ✭ 4,212 (+790.49%)
Mutual labels: responsive
Fresnel
An SSR compatible approach to CSS media query based responsive layouts for React.
Stars: ✭ 431 (-8.88%)
Mutual labels: responsive
Formik Antd
Simple declarative bindings for Ant Design and Formik.
Stars: ✭ 453 (-4.23%)
Mutual labels: forms
Responsive React multistep form component
here
Take it for a spinor, install it from NPM
React 17.0.1
List of forks
Instructions
To use this module in your app run:
npm install react-multistep
next, import it inside of your app:
const MultiStep = import from 'react-multistep'
Component has only one Prop, 'showNavigation', which controls if the navigation buttons should be visable:
prop=showNavigation
type: boolean (default = true)
It takes an array of objects representing individual steps:
const steps = [
{name: 'StepOne', component: <StepOne/>},
{name: 'StepTwo', component: <StepTwo/>},
{name: 'StepThree', component: <StepThree/>},
{name: 'StepFour', component: <StepFour/>}
];
<Multistep showNavigation={true} steps={steps}/>
If you want to explore try the included example...
- Start by cloning the repo locally:
//--step 1
git clone https://github.com/srdjan/react-multistep.git //clone the repo
cd react-multistep //navigate to the project folder
- Next, install dependencies and build the component:
npm install
npm run build // (or, `npm run build:prod` for optimized build)
- On a succesful build, navigate to the example folder and try it:
cd ../example
npm install
npm start
- Now you can open the example in your favorite browser:
open index.html
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].