# react-formstack

> A React component that renders a minimally-styled Formstack form.

Latest version **1.0.0** (published 2022-06-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-formstack
pnpm add react-formstack
yarn add react-formstack
bun add react-formstack
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-06-29 |
| First published | 2022-06-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 277 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | MSGTech |
| Maintainers | mohanrajmani |

## Links

- npm: https://www.npmjs.com/package/react-formstack
- Repository: https://github.com/MSGTech/react-formstack
- Homepage: https://github.com/MSGTech/react-formstack#readme
- Issues: https://github.com/MSGTech/react-formstack/issues
- npm.io page: https://npm.io/package/react-formstack

## Dependencies (8)

- [idx](https://npm.io/package/idx.md) ^2.5.6
- [react](https://npm.io/package/react.md) ^17.0.2
- [buffer](https://npm.io/package/buffer.md) ^6.0.3
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^3.0.0
- [sanitize-html-react](https://npm.io/package/sanitize-html-react.md) ^1.13.0

## Recent versions

- 1.0.0 (latest) — 2022-06-29

## README

# ReactFormstack
A React component that renders a minimally-styled Formstack form.

The component hierarchy is as follows:
<pre>
Formstack
└─ Form
   └─ Fieldset
   |  └─ Legend
   |  └─ Label 1
   |  └─ Field 1
   |  └─ Label n
   |  └─ Field n
   └─ Button Bar
      └─ Reset Button
      └─ Submit Button
</pre>

## Getting started  
1. `npm i` will install dependencies.
2. `npm run start` will start the dev server and open the dev site at http://localhost:3003.

## Importing
The component can be imported via script tag
```html
<script src="https://[host]/react-formstack.js"></script>
```
or as a UMD module
```javscript
import ReactFormstack from 'react-formstack'
```

## Usage
For an example of usage, see [the dev implementation here](public/index.html)

| Prop | PropType | Description |
|------|----------|-------------|
| className | string | Optional CSS className value to add to the `<form>` element. The default is `null`. |
| endpoint | string | Optional prop to change the default Formstack API proxy endpoint. The default is `'https://www.msg.com/formstack'`. |
| id | string.isRequired | Required string indicating the Formstack form ID.
| onBeforeLoad | func | Optional callback function to be called before the form configuration data is fetched from the Formstack API. Defaults to `null`. |
| onAfterLoad | func | Optional callback function to be called after the form configuration data has been fetched from the Formstack API. Defaults to `null`. |
| onBeforeSubmit | func | Optional callback function to be called before a form submission is sent. Defaults to `null`. |
| onAfterSubmit | func | Optional callback function to be called after a form has been submitted. Defaults to `null`. |
| onLoadError | func | Optional callback function to be called when an error is encountered when trying to load the form configuration from the Formstack API. Defaults to `null`. |
| onSubmitError | func | Optional callback function to be called when an error is encountered as a result of submitting the form. Defaults to `null`. |
| onResetForm | func | Optional callback function to be called when the user clicks the "Reset" button. Defaults to `null`. |
| onValidationError | func | Optional callback function to be called when the browser detects an invalid value in a field. The callback is passed the error object and the current state. Defaults to `null`. |
| resetButtonText | string | Text to display on the Reset button. Defaults to `'reset'`. |
| submitButtonText | string | Text to display on the Submit button. Defaults to `'submit'`. |
| shouldResetOnSubmit | bool | Optional flag to toggle whether the form fields should reset after the form has been submitted. Defaults to `false`. |

### Examples
#### Minimal
```javascript
<ReactFormstack id="123456" />
```

#### With reset after submission
```javascript
<ReactFormstack id="123456" shouldResetOnSubmit />
```

#### With custom Submit button text
```javascript
<ReactFormstack id="123456" submitButtonText="Join Waitlist" />
```

#### With event callbacks
```javascript
<ReactFormstack
  id="123456"
  onAfterSubmit={/*code to close the form DOM container*/}
  onSubmitError={error => console.error('This error has occurred:', error)}
  shouldResetOnSubmit
/>
```

#### Full example
```javascript
<ReactFormstack
  className="my-class"
  endpoint="http://www.msg.local/formstack/"
  id="4513364"
  onAfterLoad={data => console.log(data)}
  onAfterSubmit={data => console.log('onAfterSubmit:', data)}
  onBeforeLoad={url => console.log('onBeforeLoad:', url)}
  onBeforeSubmit={data => console.log('onBeforeSubmit:', data)}
  onLoadError={error => console.error('onLoadError:', error)}
  onSubmitError={error => console.error('onSubmitError:', error)}
  onValidationError={(error, state) => console.error('\n[ReactFormstack] onValidationError:', error, '\n state:', state)}
  resetButtonText="Clear Form"
  shouldResetOnSubmit={true}
  submitButtonText="Submit Form"
/>
```

## CSS Styling
The following CSS selectors are available for styling:

* #fs-form-[FORM ID]
* .fs-form
  * #fs-fieldset__[FIELD NAME]
  * .fs-fieldset
    * .fs-legend
    * .fs-label
    * .fs-field-wrapper
      * .fs-field__email
      * .fs-field__name
        * .fs-subfield-first
        * .fs-subfield-last
      * .fs-field__number
      * .fs-field__phone
      * .fs-field__radio
      * .fs-field__section
      * .fs-field__select
      * .fs-field__text
      * .fs-field__textarea
  * .fs-button-bar
    * .fs-button__reset
    * .fs-button__submit
  * .fs-fieldset--required

---
_Source: https://npm.io/package/react-formstack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._