Component

EmailSubscribe

A lean and clean email input that handle form submission and return user’s email. This component relies on HTML validation API with no extra library (<input type="email" required /> do the validation job).

Empty input image

Invalid email image

Usage

onSubmit will receive the user’s email and normally you would send it to your backend service.

import React from 'react'
import {
  EmailSubscribe,
  EmailTextInput,
  SubmitButton,
} from '@mui-treasury/components/EmailSubscribe';
import CircularProgress from '@material-ui/core/CircularProgress';

function App() {
  const [sending, setSending] = React.useState(false)
  async function subscribeEmail(email) {
    setSending(true)
    await fetch('/subscribe', { method: 'POST', body: { email }})
    setSending(false)
  }
  return (
    <EmailSubscribe onSubmit={subscribeEmail}>
      <EmailTextInput />
      <SubmitButton disabled={sending}>
        {sending ? <CircularProgress /> : 'Subscribe'}
      </SubmitButton>
    </EmailSubscribe>
  )
}
  • EmailSubscribe represents <form />
  • EmailTextInput represents <input />
  • SubmitButton represents <button type="submit" />

API

EmailSubscribe

  • onSubmit
    • type: (email: string) => void
    • description: called when use submit a valid email by clicking button or press enter on keyboard
  • inputClearedAfterSubmit
    • type: boolean
    • description: clear input after onSubmit is called.
  • useStyles
    • type: () => ({ form: style, input: style, submit: style })
    • description: remove default styles and use new styles instead.
  • props that form accepts

EmailTextInput

  • props that input accepts

Note: type="email" and required={true} cannot be overridden

SubmitButton

  • props that ButtonBase accepts (from @material-ui/core/ButtonBase)

Note: type="submit" cannot be overridden

Styles

checkout predefined styles

pass useStyles to create your own style

import makeStyles from '@material-ui/core/styles/makeStyles';

const useStyles = makeStyles(({ palette }) => ({
  form: {
    display: 'flex',
    alignItems: 'center',
  },
  input: {
    flex: 1,
    color: palette.text.primary,
    padding: '0.5rem 1rem',
  },
  submit: {
    alignSelf: 'stretch',
    backgroundColor: palette.primary.main,
    color: '#fff',
  }
}))

function App() {
  return (
    <EmailSubscribe
      onSubmit={console.log}
      useStyles={useStyles}
    >
      <EmailTextInput />
      <SubmitButton>Subscribe</SubmitButton>
    </EmailSubscribe>
  )
}

Don’t forget to star this project if you like! Mui Treasury Github