3.0.0-beta.14 • Published 4 months ago

@firecms/formex v3.0.0-beta.14

Weekly downloads
-
License
-
Repository
-
Last release
4 months ago

Formex - React Form Library

Formex is a lightweight, flexible library designed to simplify form handling within React applications. By leveraging React's powerful context and hooks features, Formex allows for efficient form state management with minimal boilerplate code.

Features

  • Lightweight and easy to integrate
  • Supports custom field components
  • Built-in validation handling
  • Provides both field-level and form-level state management

Installation

To install Formex, you can use either npm or yarn:

npm install your-formex-package-name

# or if you're using yarn

yarn add your-formex-package-name

Quick Start

To get started with Formex, you first need to create your form context and form controller using the useCreateFormex hook. Then, you can structure your form using the <Field /> components provided by Formex.

Step 1: Create your form controller

import React from 'react';
import { useCreateFormex } from 'formex-library';

const MyForm = () => {
    const formController = useCreateFormex({
        initialValues: {
            name: '',
            email: '',
        },
        // Optionally add a validation function
        // validation: values => {
        //   const errors = {};
        //   if (!values.name) errors.name = 'Name is required';
        //   return errors;
        // },
        onSubmit: (values) => {
            console.log('Form Submitted:', values);
        },
    });

    return (
        <form onSubmit={formController.handleSubmit}>
            {/* Field components go here */}
        </form>
    );
};

Step 2: Use the <Field /> component

import { Field } from 'formex-library';

// Inside your form component
<Field name="name">
  {({ field }) => (
    <input
      {...field}
      placeholder="Your name"
    />
  )}
</Field>

<Field name="email">
  {({ field }) => (
    <input
      {...field}
      type="email"
      placeholder="Your email"
    />
  )}
</Field>

<button type="submit">Submit</button>

Handling Submissions

Wrap your form inputs and submit button within a form element and pass the submitForm method from your form controller to the form's onSubmit event:

<form onSubmit={formController.handleSubmit}>
    {/* Fields and submit button */}
</form>

API Reference

useCreateFormex

Hook to create a form controller.

Parameters

  • initialValues: An object with your form's initial values.
  • initialErrors (optional): An object for any initial validation errors.
  • validation (optional): A function for validating form data.
  • validateOnChange (optional): If true, validates fields whenever they change.
  • onSubmit: A function that fires when the form is submitted.

<Field />

A component used to render individual form fields.

Props

  • name: The name of the form field.
  • as (optional): The component or HTML tag that should be rendered. Defaults to "input".
  • children: A function that returns the field input component. Receives field props as its parameter.

Example

<Field name="username">
  {({ field }) => <input {...field} />}
</Field>

Customization

Formex is designed to be flexible. You can create custom field components, use any validation library, or integrate with UI component libraries.

Using with UI Libraries

import { Field } from 'formex-library';
import { TextField } from 'some-ui-library';

<Field name="username">
  {({ field }) => (
    <TextField {...field} label="Username" />
  )}
</Field>

Custom Validation

Leverage the validation function in useCreateFormex to integrate any validation logic or library.

const validate = values => {
  const errors = {};
  if (!values.email.includes('@')) {
    errors.email = 'Invalid email';
  }
  return errors;
};

Conclusion

Formex provides a simple yet powerful way to manage forms in React applications. It reduces the amount of boilerplate code needed and offers flexibility to work with custom components and validation strategies. Whether you are building simple or complex forms, Formex can help streamline your form management process.

For further examples and advanced usage, refer to the Formex documentation or source code.

3.0.0-canary.174

9 months ago

3.0.0-canary.175

9 months ago

3.0.0-canary.172

9 months ago

3.0.0-canary.173

9 months ago

3.0.0-canary.170

10 months ago

3.0.0-canary.171

9 months ago

3.0.0-canary.178

9 months ago

3.0.0-canary.179

9 months ago

3.0.0-canary.176

9 months ago

3.0.0-canary.177

9 months ago

3.0.0-canary.186

8 months ago

3.0.0-canary.183

9 months ago

3.0.0-canary.184

8 months ago

3.0.0-canary.182

9 months ago

3.0.0-canary.180

9 months ago

3.0.0-canary.189

8 months ago

3.0.0-canary.187

8 months ago

3.0.0-canary.188

8 months ago

3.0.0-canary.152

11 months ago

3.0.0-canary.153

11 months ago

3.0.0-canary.150

11 months ago

3.0.0-canary.151

11 months ago

3.0.0-canary.158

11 months ago

3.0.0-canary.159

11 months ago

3.0.0-canary.156

11 months ago

3.0.0-canary.157

11 months ago

3.0.0-canary.154

11 months ago

3.0.0-canary.155

11 months ago

3.0.0-canary.163

10 months ago

3.0.0-canary.164

10 months ago

3.0.0-canary.161

11 months ago

3.0.0-canary.162

10 months ago

3.0.0-canary.160

11 months ago

3.0.0-canary.169

10 months ago

3.0.0-canary.167

10 months ago

3.0.0-canary.168

10 months ago

3.0.0-canary.165

10 months ago

3.0.0-canary.166

10 months ago

3.0.0-canary.196

8 months ago

3.0.0-canary.197

8 months ago

3.0.0-canary.194

8 months ago

3.0.0-canary.195

8 months ago

3.0.0-canary.192

8 months ago

3.0.0-canary.193

8 months ago

3.0.0-canary.190

8 months ago

3.0.0-canary.191

8 months ago

3.0.0-canary.198

8 months ago

3.0.0-canary.199

8 months ago

3.0.0-canary.215

7 months ago

3.0.0-canary.216

7 months ago

3.0.0-canary.213

7 months ago

3.0.0-canary.214

7 months ago

3.0.0-canary.211

7 months ago

3.0.0-canary.212

7 months ago

3.0.0-canary.210

7 months ago

3.0.0-canary.219

7 months ago

3.0.0-canary.217

7 months ago

3.0.0-canary.218

7 months ago

3.0.0-canary.226

7 months ago

3.0.0-canary.227

6 months ago

3.0.0-canary.224

7 months ago

3.0.0-canary.225

7 months ago

3.0.0-canary.222

7 months ago

3.0.0-canary.223

7 months ago

3.0.0-canary.220

7 months ago

3.0.0-canary.221

7 months ago

3.0.0-canary.228

6 months ago

3.0.0-canary.204

8 months ago

3.0.0-canary.205

8 months ago

3.0.0-canary.202

8 months ago

3.0.0-canary.203

8 months ago

3.0.0-canary.200

8 months ago

3.0.0-canary.201

8 months ago

3.0.0-canary.208

7 months ago

3.0.0-canary.209

7 months ago

3.0.0-canary.206

8 months ago

3.0.0-canary.207

8 months ago

3.0.0-canary.149

11 months ago

3.0.0-canary.147

11 months ago

3.0.0-canary.148

11 months ago

3.0.0-canary.145

12 months ago

3.0.0-canary.146

11 months ago

3.0.0-canary.144

12 months ago

3.0.0-beta.11

10 months ago

3.0.0-beta.12

8 months ago

3.0.0-beta.13

6 months ago

3.0.0-beta.14

4 months ago

3.0.0-canary.237

5 months ago

3.0.0-canary.235

5 months ago

3.0.0-canary.233

5 months ago

3.0.0-canary.234

5 months ago

3.0.0-canary.231

6 months ago

3.0.0-canary.232

6 months ago

3.0.0-canary.239

5 months ago

3.0.0-canary.240

5 months ago

3.0.0-canary.241

5 months ago

3.0.0-canary.248

4 months ago

3.0.0-canary.246

4 months ago

3.0.0-canary.247

4 months ago

3.0.0-canary.244

4 months ago

3.0.0-canary.245

4 months ago

3.0.0-canary.242

5 months ago

3.0.0-canary.141

12 months ago

3.0.0-canary.142

12 months ago

3.0.0-canary.143

12 months ago

3.0.0-canary.140

12 months ago

3.0.0-canary.139

12 months ago

3.0.0-canary.138

12 months ago

3.0.0-canary.137

12 months ago

3.0.0-beta.10

1 year ago

3.0.0-beta.9

1 year ago

3.0.0-canary.78

1 year ago

3.0.0-canary.77

1 year ago

3.0.0-canary.79

1 year ago

3.0.0-canary.85

1 year ago

3.0.0-canary.84

1 year ago

3.0.0-canary.87

1 year ago

3.0.0-canary.86

1 year ago

3.0.0-canary.81

1 year ago

3.0.0-canary.80

1 year ago

3.0.0-canary.83

1 year ago

3.0.0-canary.82

1 year ago

3.0.0-canary.67

1 year ago

3.0.0-canary.66

1 year ago

3.0.0-canary.69

1 year ago

3.0.0-canary.68

1 year ago

3.0.0-canary.74

1 year ago

3.0.0-canary.73

1 year ago

3.0.0-canary.76

1 year ago

3.0.0-canary.75

1 year ago

3.0.0-canary.70

1 year ago

3.0.0-canary.72

1 year ago

3.0.0-canary.71

1 year ago

3.0.0-canary.59

1 year ago

3.0.0-canary.56

1 year ago

3.0.0-canary.55

1 year ago

3.0.0-beta.7

1 year ago

3.0.0-canary.58

1 year ago

3.0.0-canary.57

1 year ago

3.0.0-canary.63

1 year ago

3.0.0-beta.8

1 year ago

3.0.0-canary.62

1 year ago

3.0.0-canary.65

1 year ago

3.0.0-canary.64

1 year ago

3.0.0-canary.61

1 year ago

3.0.0-canary.60

1 year ago

3.0.0-canary.52

1 year ago

3.0.0-canary.54

1 year ago

3.0.0-canary.53

1 year ago

3.0.0-canary.99

1 year ago

3.0.0-canary.89

1 year ago

3.0.0-canary.88

1 year ago

3.0.0-canary.96

1 year ago

3.0.0-canary.95

1 year ago

3.0.0-canary.98

1 year ago

3.0.0-canary.97

1 year ago

3.0.0-canary.92

1 year ago

3.0.0-canary.91

1 year ago

3.0.0-canary.94

1 year ago

3.0.0-canary.93

1 year ago

3.0.0-canary.90

1 year ago

3.0.0-canary.51

1 year ago

3.0.0-canary.50

1 year ago

3.0.0-canary.49

1 year ago

3.0.0-canary.48

1 year ago

3.0.0-canary.47

1 year ago

3.0.0-canary.46

1 year ago

3.0.0-canary.45

1 year ago

3.0.0-canary.44

1 year ago

3.0.0-beta.6

1 year ago

3.0.0-canary.43

1 year ago

3.0.0-canary.42

2 years ago

3.0.0-canary.41

2 years ago

3.0.0-canary.40

2 years ago

3.0.0-canary.38

2 years ago

3.0.0-canary.37

2 years ago

3.0.0-canary.39

2 years ago

3.0.0-canary.34

2 years ago

3.0.0-canary.33

2 years ago

3.0.0-canary.36

2 years ago

3.0.0-canary.35

2 years ago

3.0.0-canary.32

2 years ago

3.0.0-canary.31

2 years ago

3.0.0-beta.5

2 years ago

3.0.0-beta.4

2 years ago

3.0.0-canary.27

2 years ago

3.0.0-canary.26

2 years ago

3.0.0-canary.29

2 years ago

3.0.0-canary.28

2 years ago

3.0.0-canary.25

2 years ago

3.0.0-canary.24

2 years ago

3.0.0-canary.30

2 years ago

3.0.0-canary.23

2 years ago

3.0.0-canary.19

2 years ago

3.0.0-canary.18

2 years ago

3.0.0-canary.21

2 years ago

3.0.0-canary.20

2 years ago

3.0.0-canary.22

2 years ago

3.0.0-canary.16

2 years ago

3.0.0-canary.15

2 years ago

3.0.0-canary.17

2 years ago

3.0.0-canary.12

2 years ago

3.0.0-canary.11

2 years ago

3.0.0-canary.14

2 years ago

3.0.0-canary.13

2 years ago

3.0.0-canary.10

2 years ago

3.0.0-canary.9

2 years ago

3.0.0-canary.8

2 years ago

3.0.0-canary.7

2 years ago

3.0.0-canary.6

2 years ago

3.0.0-beta.3

2 years ago

3.0.0-canary.5

2 years ago

3.0.0-canary.4

2 years ago

3.0.0-canary.3

2 years ago

3.0.0-canary.2

2 years ago

3.0.0-canary.1

2 years ago

3.0.0-canary.0

2 years ago

3.0.0-beta.2

2 years ago