naupaw / formstrap

Let your reactstrap input component integrate seamlessly using formik

Formstrap

Let your reactstrap input component integrate seamlessly using formik

Demo

Installation

npm install bootstrap reactstrap formik formstrap

Or

yarn add bootstrap reactstrap formik formstrap

make sure both Formik, reactstrap and bootstrap installed

Basic usage

Just replace any Input / CustomInput from reactstrap to formstrap and you're done!

import Ract from 'react';
import { Formik, Form } from 'formik';
import { Input, Submit } from 'formstrap';
import { FormGroup } from 'reactstrap';

import 'bootstrap/dist/css/bootstrap.css';

const App = () => {
  const initialValues = {
    fname: 'laws',
  };

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

  return (
    <Formik initialValues={initialValues} onSubmit={onSubmit}>
      <Form>
        <FormGroup>
          <Label>Name</Label>
          <Input type="text" name="fname" />
        </FormGroup>
        <Submit withSpinner>Save</Submit>
      </Form>
    </Formik>
  );
};

Additional Props

All props is extends from default Reactstrap Input props here's the thing that we added.

<Input /> and <CustomInput />

• withLoading?: boolean - Input is disabled when submit / isSubmitting occur
• withFeedback?: boolean - Throw feedback when validation has error

<Submit />

• withLoading?: boolean - Button is disabled when submit / isSubmitting occur
• withSpinner?: boolean - Show spinner icon when submit / isSubmitting occur

formstrap's Issues

Radio button on demo page does not function

I'm not a user of the package, but I was giving it a quick glance after seeing it in the Reactstrap README. While trying out the demo page - https://pedox.github.io/formstrap/ - I noticed that the radio buttons are not functioning; I cannot select either value for the gender.

I'm unsure whether or not this is an issue with the demo page itself or with the library, but I wanted to be sure the developer(s) were aware of the issue

Console Warnings for withLoading, withFeedback and withSpinner

I'm trying to use the formstrap component but I am seeing warnings in the Chrome browser console. I've posted those below. Have you ever seen anything like that? I've tried duplicating the code in your examples but still get these warnings. Any thoughts on why that might be happening?

index.js:1 Warning: React does not recognize the `withLoading` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `withloading` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in input (created by Input)
    in Input (created by Input)
    in Input (at create.js:52)
    in div (created by FormGroup)
    in FormGroup (at create.js:50)
    in div (created by Col)
    in Col (at create.js:49)
    in div (created by Row)
    in Row (at create.js:48)
    in form (created by Form)
    in Form (at create.js:46)
    in Formik (at create.js:41)
    in div (created by Container)
    in Container (at create.js:40)
    in div (at MyLayout.js:5)
    in Layout (at create.js:39)
    in Create (created by App)
    in App
    in Container (created by AppContainer)
    in AppContainer

index.js:1 Warning: React does not recognize the `withFeedback` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `withfeedback` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in input (created by Input)
    in Input (created by Input)
    in Input (at create.js:52)
    in div (created by FormGroup)
    in FormGroup (at create.js:50)
    in div (created by Col)
    in Col (at create.js:49)
    in div (created by Row)
    in Row (at create.js:48)
    in form (created by Form)
    in Form (at create.js:46)
    in Formik (at create.js:41)
    in div (created by Container)
    in Container (at create.js:40)
    in div (at MyLayout.js:5)
    in Layout (at create.js:39)
    in Create (created by App)
    in App
    in Container (created by AppContainer)
    in AppContainer

index.js:1 Warning: React does not recognize the `withSpinner` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `withspinner` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in button (created by Button)
    in Button (created by Submit)
    in Submit (at create.js:248)
    in div (created by FormGroup)
    in FormGroup (at create.js:247)
    in form (created by Form)
    in Form (at create.js:46)
    in Formik (at create.js:41)
    in div (created by Container)
    in Container (at create.js:40)
    in div (at MyLayout.js:5)
    in Layout (at create.js:39)
    in Create (created by App)
    in App
    in Container (created by AppContainer)
    in AppContainer