use-web3forms library

A tiny library that makes form submissions easier with Web3Forms.

Lalit • September 25, 2021

0 views

Cover image
typescriptmicrobundle

This was my first open source NPM package. It is a simple library that makes form submission easier with the help of Web3forms.
I built it to reduce the boilerplate code required to submit a form.

I learnt about managing releases and publishing packages on NPM and Yarn.
Moreover, I dived deep into javascript bundlers. I tried a handful of them such as Rollup, esbuild, bunchee and microbundle.

I finally came down to microbundle as it required no configuration and was beginner friendly too. (bunchee too requires no configuration!!)

I found out about microbundle from Paco Coursey's next-themes package.

Here's how you you would use it with typescript:

interface FormData {
  hello: string;
  isWorking: boolean | 'Probably';
}
 
const { submit } = useWeb3forms<FormData>({
  apikey: 'YOUR_ACCESS_KEY_HERE',
  onSuccess: (successMessage, data) => {
    console.log(successMessage, data);
  },
  onError: (errorMessage, data) => {
    console.log(errorMessage, data);
  },
});
 
// Submitting the form
<button
  onClick={(e) => {
    submit({
      hello: 'world',
      isWorking: 'Yesss!!!',
    });
  }}>
  Submit form
</button>;

use-web3forms is only about <500 bytes.