https://github.com/naupaw/formstrap

Let your reactstrap input component integrate seamlessly using formik
https://github.com/naupaw/formstrap

Last synced: 3 months ago
JSON representation

Let your reactstrap input component integrate seamlessly using formik

• Host: GitHub
• URL: https://github.com/naupaw/formstrap
• Owner: naupaw
• License: mit
• Created: 2019-12-01T08:53:36.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T12:27:23.000Z (about 2 years ago)
• Last Synced: 2024-11-02T16:04:08.051Z (4 months ago)
• Language: TypeScript
• Homepage: https://pedox.github.io/formstrap/
• Size: 5.36 MB
• Stars: 16
• Watchers: 2
• Forks: 1
• Open Issues: 20
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• oss - formstrap - Integrate Reactstrap input components with Formik utility - React, Formik, Reactstrap (Open Source Project / Utility)

README

        
# Formstrap

[![npm version](https://badge.fury.io/js/formstrap.svg)](https://badge.fury.io/js/formstrap) [![reactstrap version](https://img.shields.io/npm/dependency-version/formstrap/peer/reactstrap)](https://github.com/reactstrap/reactstrap) [![formik version](https://img.shields.io/npm/dependency-version/formstrap/peer/formik)](https://github.com/jaredpalmer/formik)

Let your reactstrap input component integrate seamlessly using formik

[**Demo**](http://pedox.github.com/formstrap/)

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!

```jsx

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 (

    

      

        

          Name

          

        

        Save

      

    

  );

};

```

## Additional Props

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

### `` and ``

- **withLoading?**: _boolean_ - Input is disabled when submit / isSubmitting occur

- **withFeedback?**: _boolean_ - Throw feedback when validation has error

### ``

- **withLoading?**: _boolean_ - Button is disabled when submit / isSubmitting occur

- **withSpinner?**: _boolean_ - Show spinner icon when submit / isSubmitting occur