Using custom form buttons

Preamble

The default form provides two buttons out of the box: A submit button, and a reset button.

While these buttons certainly serve their purpose some forms require more buttons, or you might want to adjust the text of them(How dare you not want emojis on your production corporate website!).

Adjusting the default buttons

Adjusting the default buttons is the easiest task. The react-formilicious/defaultButtons module contains our default buttons, which we can then adjust:

import * as defaultButtons from "@react-formilicious/core/defaultButtons";

defaultButtons.submit.name = "👨‍🚀 Beam the data up!";
defaultButtons.reset.name = "🔥 We can do better, reset!";

We can also override all buttons all together if so desired:

import * as defaultButtons from "react-formilicious/defaultButtons";

defaultButtons.setButtons([
  {
    key: "my-awesome-save-button",
    name: "💾 I ain't need no defaults!",
    action: "submit",
    type: "info"
  }
]);

As you can see we used "submit" as the action of the button. There are three valid action types:

• "submit" - To submit the form and call onSubmit
• "reset" - To reset the form
• (data) => {} - To call a custom action. The current form data is the parameter.

Don't drink too much cool-aid!

The defaultButtons operations are all mutating. I don't want mutants running around in my code, and neither does Formilicious. It is thus important to adjust the default buttons only once per application lifecycle, and before and form was ever rendered.

If you need different buttons for different forms look into the buttons prop(explained below).

Custom buttons for different forms

Sometimes a form needs different buttons that the default. For this case we have the buttons prop. If the buttons prop is specified the default buttons will be ignored and the ones in this prop are used instead.

import defaultButtons from "react-formilicious/defaultButtons";

<Form
  data={{}}
  onSubmit={data => alert(JSON.stringify(data))}
  buttons={[
    ...defaultButtons(),
    {
      key: "log",
      name: (<span>⚙️ <code>console.log</code> the data</span>),
      action: (data) => console.log("The current form values are:", data),
      type: "info"
    }
  ]}
  elements={[
    {
      type: TextField,
      key: "name",
      name: "🙃 Username",
      placeholder: "🙃 Enter your name here!"
    }
  ]} />

As you can see we even retained the default buttons here, by calling the default import of react-formilicious/defaultButtons and destructuring its result into the buttons array.

This is the type signature of a button:

{
   key: string,
   name: React.ReactNode,
   action: "submit" | "reset" | (data: any) => void,
   type: string?
}

We're done! 🎉

You can now override the default buttons, use own own entirely or merge them with the default buttons. If you want to have a further look at how the default buttons work, have a look at /src/defaultButtons.js and renderButtons() in /src/index.js.