Question: How to use formol in Gatsby?

[alexsinfarosa]

Hi!

I would like to use formol with Gatsby. Any idea how to set it up?

Thanks!

[paradoxxxzero]

Okay I managed to make it work Gatsby:

First don't import from formol but from formol/lib/formol (to force the use of the built version):

import React from "react"
import "formol/lib/default.css"
import Formol, { Field } from "formol/lib/formol"

const onSubmit = ({ login, password }) => alert(login, password)

export default () => (
  <div>
    Hello world!
    <Formol onSubmit={onSubmit}>
      <Field>Login</Field>
      <Field type="password-strength">Password</Field>
    </Formol>
  </div>
)

Second create an assets directory in static and create a formol link that points to the formol lib dir:

mkdir static/assets/
cd static/assets/
ln -s ../../node_modules/formol/lib formol

And voilà

[alexsinfarosa]

It works. Thanks!

[paradoxxxzero]

Great, seems a bit hackish though, I'll look for something more natural with the source + build packaging

[yodacom]

Hi paradoxxxzero. Loving the form repo so far. I am also trying to change the CSS on the Submit button. Not sure how to access it in this configuration. How can I change the submit button css? I have successfully got formol working but cannot figure out how to change the CSS in particular to the submit button. Help is greatly appreciated!

[yodacom]

Let us know when you find a better "less hackish" solution to use Formol with Gatsby. Maybe a plugiin? Still trying to figure out a way to change CSS in Formol when set up as suggested above. Ideas on how? All the best, Jeremy

[mmirus]

Hey all - I just created this Gatsby plugin that modifies the Gatsby build process to do what Formol needs. This is brand new, so YMMV.

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

Feel free to give it a try and leave feedback on the repo if you run into any problems or see anything that should be changed!