sparkup-web-react-mui

Utilities to develop a react web application based on sparkup-web-client with

• MUI Material UI components
• react-hook-form

Installation

npm install @mergesoft/sparkup-web-client @mergesoft/sparkup-react-mui

Usage in TypeScript

Import the package

import { store_actions } from "@mergesoft/sparkup-web-client";
import { useRootStore } from '@mergesoft/sparkup-react-mui/hooks';
import { FormInput, form_input_props } from "@mergesoft/sparkup-react-mui/forms";

Using the store

const MyComponent: React.FC = () => {
  
  const isAuthed = useRootStore((s) => s.user.isAuthenticated);
  const menu = useRootStore((s) => s.menu);

  return (
    <div>
      <div>
        {isAuthed ? `Logged in` : 'Not logged in'}
      </div>
      {isAuthed ? (
        <button onClick={() => store_actions.user.setAuthenticated(false)}>Logout</button>
      ) : (
        <button onClick={() => store_actions.user.setAuthenticated(true)}>Login</button>
      )}
    </div>
  )
}

Using forms

const FormModel_Default = {
  my_text: "" as string,
  my_option: false as boolean
};

type FormModel = typeof FormModel_Default;

const MyComponent: React.FC = () => {
  
  const frm = useForm<FormModel>({
    defaultValues: FormModel_Default,
    values: FormModel_Default
  });

  const formState = frm.formState;

  async function onSubmit(data: FormModel)
  {
    // Send data.
  }

  function onReset()
  {
    frm.reset(FormModel_Default);
  }

  return (
    <form onSubmit={frm.handleSubmit(onSubmit)}>
      {frm.formState.errors.root && (
        <FormHelperText error={true}>{frm.formState.errors.root.message}</FormHelperText>
      )}
      <fieldset disabled={formState.isSubmitting}>
        <FormInput<FormModel>
          frm={frm}
          name="my_text"
          label="Fill in some text"
          rules={{ 
            required:{ value: true, message: "This field is required" }, 
            minLength:{ value: 2, message: "Minimum length is 2 characters" } 
          }}
          control={(field,fieldState) => (
            <TextField 
              {...form_input_props("TextField",field,fieldState)}
              multiline 
              rows={4}
            />
          )}
        />
        <br/>
        <FormInput<FormModel>
          frm={frm}
          name="my_option"
          label="Select this one!"
          labelPlacement="end"
          rules={{ 
            required:{ value: true, message: "This field is required" }
          }}
          control={(field,fieldState) => (
            <Checkbox {...form_input_props("Checkbox",field,fieldState)}/>
          )}
        />
        <br/>
        <button disabled={formState.isSubmitting}>Save</button>
        <br/>
        <button disabled={formState.isSubmitting}
                type="button" 
                onClick={onReset}>Clear</button>      
      </fieldset>
    </form>
  )
}

Features

• 🚀 Uses Sparkup Web Client Communication layer and state management
• 📦 Uses MUI Material components
• 📦 Uses react-hook-form for forms state management and validation
• 🔧 TypeScript support
• 📘 ESM and CommonJS support

License

ISC © mergesoft

Repository

https://github.com/mergesoft/sparkup-react-mui