Popularity

1.0

Growing

Activity

2.8

Declining

Stars 14

Watchers 2

Forks 3

Last Commit 7 months 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 7.3 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)

Appwrite - The Open Source Firebase alternative introduces iOS support

Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

Promo appwrite.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