Popularity

1.0

Stable

Activity

0.0

Declining

Stars 14

Watchers 3

Forks 3

Last Commit over 1 year ago

Programming language: TypeScript

License: Apache License 2.0

Tags: UI Components Paginator

react-steps alternatives and similar libraries

Based on the "Paginator" category.
Alternatively, view react-steps alternatives based on common mentions on social networks and blogs.

react-paginate

7.9 2.9 react-steps VS react-paginate

A ReactJS component that creates a pagination
react-laravel-paginex

1.3 0.0 react-steps VS react-laravel-paginex

Laravel Pagination with ReactJS (customizable)

SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App

With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

Promo surveyjs.io

paginated

0.9 8.1 react-steps VS paginated

⚛️ React render props component & custom hook for pagination.

Do you think we are missing an alternative of react-steps or a related project?

Add another 'Paginator' Library

Popular Comparisons

README

React Stepper

React Stepper which can also be used on mobile devices

Npm Package: https://www.npmjs.com/package/@tkwant/react-steps

Demo: https://stepper.tkwant.de

Installation

yarn add @tkwant/react-steps

npm i @tkwant/react-steps

Usage

import React, { useState } from "react";
import { Stepper, Step } from "./Stepper/Stepper";
interface Props {}
const App: React.FC<Props> = () => {
  const [curStep, setCurStep] = useState(0);
  const [step2Data, setStep2Data] = useState("");
  const renderContent = () => {
    switch (curStep) {
      case 0:
        return (
          <div style={{ display: "flex", justifyContent: "center" }}>
            First Step
          </div>
        );
      case 1:
        return (
          <div style={{ display: "flex", justifyContent: "center" }}>
            <p style={{ marginRight: 2 }}>My Validation: </p>
            <input
              style={{ border: "2px solid red" }}
              onChange={(e) => setStep2Data(e.currentTarget.value)}
              value={step2Data}
            />
          </div>
        );
      default:
        return null;
    }
  };

  return (
    <>
      <Stepper
        style={{ padding: 10 }}
        curStep={curStep}
        setCurStep={setCurStep}
      >
        <Step label="Step 0 " />
        <Step label="Step 1" />
        <Step locked={step2Data === ""}>??</Step>
        <Step locked={curStep < 2} />
        <Step locked={curStep < 3} />
        <Step locked={curStep < 4} />
        <Step locked={curStep < 5} />
      </Stepper>
      {renderContent()}
    </>
  );
};

export default App;

Stepper Props

Prop	Description	Default
children
curStep
setCurStep
className	optional	""
activeColor	optional	"#0b294b"
inActiveColor	optional	"#D1D5DB"
borderColor	optional	"#8fb3db"
stepSize	optional	60
progressBarActiveColor	optional	"green"
progressBarBackgroundColor	optional	"lightgray"
smallScreenShowProgressbar	optional	true
style	optional	{}

Step Props

Prop	Description	Default
children	optional	current Index
label	optional	""
locked	optional	false

react-steps

Demo