Gravatar for claytonfbell@gmail.com
(971) 285-5666claytonfbell@gmail.com@claytonfbellgithub.com/claytonfbell

NPM material-ui-pack

material-ui-pack.xyzgithub.com/claytonfbell/material-ui-pack

npm version Build Status

A while back I created an npm package for myself to keep some shared code between multiple projects and for work and personal side-projects.

Its a fairly opinionated API for handling form state, dark-mode, and some useful React hooks.

Demo Form

import { Box } from "@material-ui/core"
import { Form } from "material-ui-pack"
import React, { useState } from "react"

export default function Demo() {
  const [state, setState] = React.useState({
    firstName: "",
    phone: "",
    state: "OR",
  })
  const [error, setError] = useState<string>()
  function handleSubmit() {
    setError(`It worked! ${JSON.stringify(state)}`)
  }
  return (
    <Box maxWidth={400}>
      <Form
        onSubmit={handleSubmit}
        state={state}
        setState={setState}
        error={error}
        schema={{
          firstName: "capitalize",
          phone: "phone",
          state: {
            type: "region",
            countryIsoType: "isoAlpha2",
            country: "US",
          },
        }}
      />
    </Box>
  )
}
Stack Used