5.0.6 • Published 2 years ago

@slimr/forms v5.0.6

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

🪶 @slimr/forms npm package

A slim (< 1kB), enhanced HTML form with auto-disabling, auto-reset, error handling, more JS events, and context to its children.

  • optimizes for vanilla, uncontrolled input elements
  • does not cause re-renders
  • disables form elements while submitting
  • can auto-reset the form is desired
  • uses browser accessibility APIs to share errors to form elements
  • wraps onSubmit to
    • auto call event.preventsDefault()
    • pass form values as an Object
  • provide JS events and React context for rejected, submitted, accepted states
  • < 1kB when bundled+gzipped with a broader application

Context

@slimr is a set of slim React (hence '@slimr') libs. Check them all out on github!

Usage

<SForm onSubmit={(_, vals) => console.log(vals)}>
  {[
    'checkbox',
    'color',
    'date',
    'email',
    'number',
    'password',
    'search',
    'text',
    'textarea',
    'tel',
    'url',
  ].map(type => (
    <InputBox key={type} label={type} name={type} type={type} required />
  ))}
  <RadioBox
    label="Radios"
    name="radio1"
    options={[
      {label: 'Choice 1', value: 'choice1'},
      {label: 'Choice 2', value: 'choice2'},
      {label: 'Choice 3', value: 'choice3'},
    ]}
    required
  />
  <SelectBox
    label={'Select Single'}
    name="select1"
    options={[
      {label: '--', value: ''},
      {label: 'Choice 1', value: 'choice1'},
      {label: 'Choice 2', value: 'choice2'},
      {label: 'Choice 3', value: 'choice3'},
    ]}
    required
  />
  <SelectBox
    label={'Select multiple'}
    multiple
    name="select2"
    options={[
      {label: 'Choice 1', value: 'choice1'},
      {label: 'Choice 2', value: 'choice2'},
      {label: 'Choice 3', value: 'choice3'},
    ]}
    required
  />
  <FormFooter />
  <RenderCheck />
</SForm>

API

SForm

An enhanced HTML form with auto-disabling, auto-reset, error handling, more JS events, and context to its children.

SFormError

An extension of Error that accepts an errorSet as a constructor property. It is used to share errors to form elements

throw new FormError({field1: 'This field is invalid'})

useSFormContext

A hook to get the current state of the form

5.0.6

2 years ago

5.0.5

2 years ago

5.0.4

2 years ago

5.0.3

2 years ago

5.0.2

2 years ago

5.0.1

2 years ago

4.1.30

2 years ago

4.1.31

2 years ago

4.1.32

2 years ago

4.1.33

2 years ago

4.1.35

2 years ago

4.1.36

2 years ago

4.1.37

2 years ago

4.1.41

2 years ago

4.1.42

2 years ago

4.1.43

2 years ago

4.1.44

2 years ago

4.1.40

2 years ago

4.1.49

2 years ago

4.1.29

2 years ago

4.1.45

2 years ago

4.1.46

2 years ago

4.1.48

2 years ago

4.1.28

2 years ago

4.1.27

2 years ago

4.1.26

2 years ago

4.1.25

2 years ago

4.1.24

2 years ago

4.1.23

2 years ago

3.1.22

2 years ago

2.1.20

2 years ago

2.1.19

2 years ago

2.1.18

2 years ago

2.1.17

2 years ago

2.1.16

2 years ago

2.1.15

2 years ago

2.1.14

2 years ago

2.1.13

2 years ago

2.1.12

2 years ago

2.1.11

2 years ago

2.1.8

2 years ago

2.1.7

2 years ago