react-ssg-netlify-forms is an open source Node package available on npm. It serves to provide a seamless integration between Netlify Forms and React-based static-site generators (or really any program utilizing React’s ReactDOMServer.renderToString() under the hood) based on keen insight around the underlying implementation of Netlify Forms.

We see folks on Netlify Community often having issues integrating Netlify Forms into their React-based static site. This package serves to fix that problem. It also attempts to give the consuming developer utmost freedom in writing the actual Form markup, requiring only that the <NetlifyForm> component wrapper be used, and that the formValues object illustrated below be a hash whose attributes represent the correctly named Form fields Netlify should be expecting (e.g. the attribute name in the hash needs to match the input’s HTML name attribute value):

import React, { useState } from "react"
import { navigate } from 'gatsby'
import NetlifyForm from 'react-ssg-netlify-forms'

const IndexPage = () => {

  // Post-Submit Navigate
  const postSubmit = () => {
    navigate('/hooray')
  }

  // Simple controlled form setup (Control your own state)
  const handleChange = e => setFormValues({ ...formValues, [e.target.name]: e.target.value })
  const [formValues, setFormValues] = useState({
    name: '',
    message: ''
  })

  return (
      <NetlifyForm formName="Very Simple Form" formValues={formValues} postSubmit={postSubmit} >
        <div>
          Your Name: <input type="text" name="name" value={formValues.name} onChange={handleChange} required />
        </div>
        <div>
          Message: <textarea name="message" value={formValues.message} onChange={handleChange} required />
        </div>
        <div>
          <button type="submit">Send</button>
        </div>
      </NetlifyForm>
  )
}

Given that set of parameters, this package ensures that submissions be correctly delivered to Netlify Forms every time. It also includes an integrated honey-pot field for additional spam filtering and security.

I also wrote a two-part series on using and understanding Netlify Forms correctly, Pt. 1 here.