npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

formik-stepper-with-file-upload

v0.0.3

Published

This is a reusable and scalable React component based on the `Formik` library. By adding `validationSchema` it will not go to the next step, unless the entries are validated, You can experiment and the example below illustrates the props

Downloads

15

Readme

React Formik Stepper Component

This is a reusable and scalable React component based on the Formik library. By adding validationSchema it will not go to the next step, unless the entries are validated, You can experiment and the example below illustrates the props

Installation

Using npm:

npm install formik-stepper

Using yarn

yarn add formik-stepper

FormikStepper Props

| Properties | Type | Default value | Description | | ----------------- | ------- | ------------- | ------------------------------------------------------------------------------- | | Formik ...Props | ...... | ..... | Click to learn more | | labelsColor | String | secondary | The text label color can be root variables or css => #fff | | withStepperLine | Boolean | false | default and If it is false, it hides stepper line | | nextBtnLabel | String | Next | Label the "Moving to Next Step" button | | prevBtnLabel | String | Prev | Label the "Moving to Previous Step" button | | submitBtnLabel | String | Submit | Label the "Submit Form" button | | nextBtnColor | String | primary | Color the "Moving to Next Step" button can be root variables or css => #fff | | prevBtnColor | String | danger | Color the "Moving to Previous Step" button can be root variables or css => #fff | | submitBtnColor | String | success | Color the "Submit Form" button can be root variables or css => #fff |

FormikStep Props

| Properties | Type | Default value | Description | | ------------- | ------- | ------------- | ------------------------------------------------------------------------------------------------------------------- | | label | String | .... | The text label of Step | | withIcons | String | .... | to add icon into the circle must add icon as class Name like Fontawesome | | withNumbers | Boolean | true | If it was true when you added withIcons, it hides the icon and shows the step number | | iconColor | String | white | The color of Step icon can be root variables or css => #fff | | circleColor | String | blue | The color of Step circle can be root variables or css => #fff |

InputField Props

| Properties | Type | Default value | Description | | ------------- | ------ | --------------------- | ------------------------------------------------------------------------ | | type | String | text | Click to learn more | | label | String | .... | The text label of Input Field | | placeholder | String | Value of label prop | The text placeholder of Input Field | | className | String | .... | The className of your custem style css | | iconStart | String | .... | To Add icon in prepend of input field | | symbol | String | .... | To Text in prepend of input field | | icon | String | .... | To Add icon in append of input field |

Example

import React from "react";
import * as Yup from "yup"
import { FormikStepper, FormikStep, InputField } from "formik-stepper";



const validationSchema = Yup.object().shape({
  firstName: Yup.string().required("The First Name field is required"),
  lastName: Yup.string().required("The Last Name field is required"),
  email: Yup.string()
    .email("The email must be a valid email address.")
    .required("The Email field is required"),
  password: Yup.string()
    .required("The Password field is required")
    .matches(
      /^(?=.*[A-Za-z])(?=.*\d)(?=.*)[A-Za-z\d]{8,}$/,
      `Must Contain 8 Characters, One Uppercase, One Lowercase,
      One Number and one special case Character [@$!%*#?&-_]`
    ),
  privacy: Yup.boolean()
    .isTrue()
    .oneOf([true], "The terms and conditions must be accepted."),
});



export const FormStepper = () => {

const onSubmit = async ( values, { setSubmitting } ) => {
      console.log(values);
      setSubmitting(false); //// Important
  };

    return(
       <FormikStepper
            /// Accept all Formik props
            onSubmit={onSubmit} /// onSubmit Function
            initialValues={{
              firstName: "",
              lastName: "",
              email: "",
              password: "",
              privacy: false,
            }}
            validationSchema={validationSchema}
            labelsColor="secondary" /// The text label color can be root variables or css => #fff
            withStepperLine /// false as default and If it is false, it hides stepper line
            nextBtnLabel="step" /// Next as default
            prevBtnLabel="return" /// Prev as default
            submitBtnLabel="Done" /// Submit as default
            nextBtnColor="primary" /// as default and The color can be root variables or css => #fff
            prevBtnColor="danger" /// as default and The color can be root variables or css => #fff
            submitBtnColor="success" /// as default and The color can be root variables or css => #fff
          >
            {/*  First Step */}
            <FormikStep
              label="Profile Info" /// The text label of Step
              withIcons="fa fa-user" // to add icon into the circle must add icon as class Name like Fontawesome
              withNumbers /// If true, it hides the icon and shows the step number
              iconColor="white" /// The color can be root variables or css => #fff
              circleColor="danger" /// The color can be root variables or css => #fff
            >
              <InputField name="firstName" label="First Name"></InputField>
              <InputField name="lastName" label="Last Name" />
            </FormikStep>
            {/* Second Step */}
            <FormikStep
              label="Login Info"
              withIcons="fa fa-lock"
              iconColor="white"
              circleColor="danger"
            >
              <InputField name="email" label="Email" type="email" />
              <InputField name="password" label="password" type="password" />
              <div>
                <InputField name="privacy" label="privacy" type="checkbox" />
              </div>
            </FormikStep>
          </FormikStepper>
    );
);