npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ducor/helpers

v1.2.9

Published

Since working with forms is so common, Inertia includes a form helper designed to help reduce the amount of boilerplate code needed for handling typical form submissions.

Downloads

1,145

Readme

useForm

Since working with forms is so common, Inertia includes a form helper designed to help reduce the amount of boilerplate code needed for handling typical form submissions.

    import { useForm } from '@ducor/helpers'
    
    const { data, setData, req, processing, errors } = useForm({
      email: '',
      password: '',
      remember: false,
    })
    
    function submit(e) {
      e.preventDefault()
      req.post('/login')
    }
    
    return (
      <form onSubmit={submit}>
        <input type="text" value={data.email} onChange={e => setData('email', e.target.value)} />
        {errors.email && <div>{errors.email}</div>}
        <input type="password" value={data.password} onChange={e => setData('password', e.target.value)} />
        {errors.password && <div>{errors.password}</div>}
        <input type="checkbox" checked={data.remember} onChange={e => setData('remember', e.target.checked)} /> Remember Me
        <button type="submit" disabled={processing}>Login</button>
      </form>
    )

To submit the form, you may use the get, post, put, patch and delete methods.

    const { req } = useForm({ ... })
    
    req.get(url, options)
    req.post(url, options)
    req.put(url, options)
    req.patch(url, options)
    req.delete(url, options)

The submit methods support all of the typical visit options, such as preserveState, preserveScroll, and event callbacks, which can be helpful for performing tasks on successful form submissions. For example, you might use the onSuccess callback to reset inputs to their original state.

    const { req, reset } = useForm({ ... })
    
    req.post('/profile', {
      preserveScroll: true,
      onSuccess: () => reset('password'),
    })

If you need to modify the form data before it's sent to the server, you can do so via the transform() method.

    const { transform } = useForm({ ... })
    
    transform((data) => ({
      ...data,
      remember: data.remember ? 'on' : '',
    }))

You can use the processing property to track if a form is currently being submitted. This can be helpful for preventing double form submissions by disabling the submit button.

    const { processing } = useForm({ ... })
    
    <button type="submit" disabled={processing}>Submit</button>

If your form is uploading files, the current progress event is available via the progress property, allowing you to easily display the upload progress.

    const { progress } = useForm({ ... })
    
    {progress && (
      <progress value={progress.percentage} max="100">
        {progress.percentage}%
      </progress>
    )}

If there are form validation errors, they are available via the errors property. When building Laravel powered Inertia applications, form errors will automatically be populated when your application throws instances of ValidationException, such as when using $request->validate().

    const { errors } = useForm({ ... })
    
    {errors.email && <div>{errors.email}</div>}

For a more thorough discussion of form validation and errors, please consult the validation documentation.

To determine if a form has any errors, you may use the hasErrors property. To clear form errors, use the clearErrors() method.

    const { clearErrors } = useForm({ ... })
    
    // Clear all errors...
    clearErrors()
    
    // Clear errors for specific fields...
    clearErrors('field', 'anotherfield')

If you're using a client-side input validation libraries or do client-side validation manually, you can set your own errors on the form using the setErrors() method.

    const { setError } = useForm({ ... })
    
    // Set a single error...
    setError('field', 'Your error message.');
    
    // Set multiple errors at once...
    setError({
      foo: 'Your error message for the foo field.',
      bar: 'Some other error for the bar field.'
    });

Unlike an actual form submission, the page's props remain unchanged when manually setting errors on a form instance.

When a form has been successfully submitted, the wasSuccessful property will be true. In addition to this, forms have a recentlySuccessful property, which will be set to true for two seconds after a successful form submission. This property can be utilized to show temporary success messages.

To reset the form's values back to their default values, you can use the reset() method.

    const { reset } = useForm({ ... })
    
    // Reset the form...
    reset()
    
    // Reset specific fields...
    reset('field', 'anotherfield')

If your form's default values become outdated, you can use the defaults() method to update them. Then, the form will be reset to the correct values the next time the reset() method is invoked.

    const { setDefaults } = useForm({ ... })
    
    // Set the form's current values as the new defaults...
    setDefaults()
    
    // Update the default value of a single field...
    setDefaults('email', '[email protected]')
    
    // Update the default value of multiple fields...
    setDefaults({
      name: 'Updated Example',
      email: '[email protected]',
    })

To determine if a form has any changes, you may use the isDirty property.

    const { isDirty } = useForm({ ... })
    
    {isDirty && <div>There are unsaved form changes.</div>}

To cancel a form submission, use the cancel() method.

    const { cancel } = useForm({ ... })
    
    cancel()

To instruct Inertia to store a form's data and errors in history state, you can provide a unique form key as the first argument when instantiating your form.

    import { useForm } from '@ducor/helpers'
    
    const form = useForm('CreateUser', data)
    const form = useForm(`EditUser:${user.id}`, data)

File uploads

When making requests or form submissions that include files, Inertia will automatically convert the request data into a FormData object.

For a more thorough discussion of file uploads, please consult the file uploads documentation.

XHR / fetch submissions

Using Inertia to submit forms works great for the vast majority of situations; however, in the event that you need more control over the form submission, you're free to make plain XHR or fetch requests instead using the library of your choice.

Credits

@ducor/helpers is heavily inspired by the form handling approach from Inertia.js. Ultimately, @ducor/helpers is an effort to provide a standalone Form-like service for use outside of specific frameworks.