All Projects → srdjan → React Multistep

srdjan / React Multistep

Licence: mit
React multistep form component

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
Unform
Performance-focused API for React forms 🚀
Stars: ✭ 4,340 (+817.55%)
Mutual labels:  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
Topcoat
CSS for clean and fast web apps
Stars: ✭ 4,288 (+806.55%)
Mutual labels:  ui-components
Formik Antd
Simple declarative bindings for Ant Design and Formik.
Stars: ✭ 453 (-4.23%)
Mutual labels:  forms

Responsive React multistep form component

Take it for a spin here

or, 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...

  1. 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
  1. Next, install dependencies and build the component:
npm install
npm run build // (or, `npm run build:prod` for optimized build)
  1. On a succesful build, navigate to the example folder and try it:
cd ../example
npm install
npm start
  1. 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].