https://github.com/mmirus/gatsby-plugin-formol

Support Formol's webpack/Babel requirements on Gatsby
https://github.com/mmirus/gatsby-plugin-formol

form formol gatsby gatsby-plugin

Last synced: 1 day ago
JSON representation

Support Formol's webpack/Babel requirements on Gatsby

• Host: GitHub
• URL: https://github.com/mmirus/gatsby-plugin-formol
• Owner: mmirus
• Created: 2019-06-15T15:19:21.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-07-20T12:55:09.000Z (over 5 years ago)
• Last Synced: 2025-02-06T12:02:29.586Z (9 days ago)
• Topics: form, formol, gatsby, gatsby-plugin
• Language: JavaScript
• Homepage:
• Size: 20.5 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gatsby-plugin-formol

Support Formol's webpack/Babel requirements on Gatsby

Learn more about Formol here: https://github.com/Kozea/formol

## Installing

Run:

`yarn add gatsby-plugin-formol formol date-fns@next`

`yarn add -D @babel/plugin-proposal-decorators babel-plugin-add-react-static-displayname`

## Using Formol

### Add to `gatsby-config.js`

```js

module.exports = {

  plugins: [

    `gatsby-plugin-formol`,

  ],

}

```

### Create your form

```js

import React from "react";

import Formol, { Field } from "formol";

import "formol/lib/default.css";

const handleSubmit = async values => {

  console.log(values);

  // process submission (e.g., send to API)...

};

const SignUpForm = () => (

  

    First Name

    Last Name

    

      Email

    

    

        patternMismatch && "Zip must be a five-digit number"

      }

    >

      Zip

    

  

);

export default SignUpForm;

```

### Display it in a page

```js

import React from "react";

import { Link } from "gatsby";

import Layout from "../components/layout";

import SEO from "../components/seo";

import SignUpForm from "../components/SignUpForm";

const HomePage = () => (

  

    

    
Hi people

    
Welcome to your new Gatsby site.

    
Now go build something great.


    

    Go to page 2

  

);

export default HomePage;

```