Exciting release!Introducing "safe npm". Learn more
Socket
Log inDemoInstall

react-netlify-forms

Package Overview
Dependencies
1
Maintainers
1
Versions
7
Issues
File Explorer

Advanced tools

react-netlify-forms

React components and hooks giving you the power of Netlify Forms. Start building serverless forms on Netlify with React.

    1.3.3latest
    GitHub

Version published
Maintainers
1
Weekly downloads
335
decreased by-33.27%

Weekly downloads

Changelog

Source

v1.3.3

1.3.3 (2022-09-01)

Bug Fixes

  • peer-deps: tested against React 18 (a228b4c)

Readme

Source

react-netlify-forms

React components and hooks giving you the power of Netlify Forms. Start building serverless forms on Netlify with React. Honeypot fields and reCAPTCHA are included as ready-to-use components.

NPM minzipped package size JavaScript Style Guide License

Features

It gives you all the features of Netlify Forms as simple and reusable React components which have been tested on Netlify.

  • Default form handlers with support for file uploads.
  • Spam prevention through included honeypot and reCAPTCHA components.
  • Can be used alone or together with form libraries such as Formik or react-hook-form.

Before using

This component must be used with Server-Side Rendering (SSR) because Netlify searches for a data-netlify attribute on HTML form tags to setup their Forms backend for you.

➡️ Suggestions for SSR: GatsbyJS, Next.js, react-static

Install

Either install with NPM via:

npm install --save react-netlify-forms

or with YARN via:

yarn add react-netlify-forms

Usage

In the following example a contact form with two inputs and a honeypot for extra spam prevention is shown. It also works without JavaScript by falling back to a serverside-rendered form which just submits data with an usual POST request:

import React, { Component } from 'react' import { NetlifyForm, Honeypot } from 'react-netlify-forms' export default ContactForm = () => ( <NetlifyForm name='Contact' action='/thanks' honeypotName='bot-field'> {({ handleChange, success, error }) => ( <> <Honeypot /> {success && <p>Thanks for contacting us!</p>} {error && ( <p>Sorry, we could not reach our servers. Please try again later.</p> )} <div> <label htmlFor='name'>Name:</label> <input type='text' name='name' id='name' onChange={handleChange} /> </div> <div> <label htmlFor='message'>Message:</label> <textarea type='text' name='message' id='message' rows='4' onChange={handleChange} /> </div> <div> <button type='submit'>Submit</button> </div> </> )} </NetlifyForm> )

For more examples please browse through our website.

License

MIT © Björn Clees


Thanks to create-react-library for providing quick setup for NPM packages.

Keywords

FAQs

Last updated on 01 Sep 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc