Feature suggestion: shorthand for usage with html native forms

[hexxt-git]

Issue

a common pattern in frontend development is using <input /> elements with a name property to submit <form />'s.
the current implementation requires imperatively programming the steps to take an image and compress it before submitting it.

Suggested fix

my suggestion is implementing a hook to inject this functionality directly into the <input /> or <form /> elements

const { registerReactShrinkInput } = useReactShrinkInput({
	maxKB: 300
});

return (
	<form>
		<input type="file" accept="image/*" name="banner" {...registerReactShrinkInput} />
	</form>
)

or in the form

const { registerReactShrinkForm } = useReactShrinkForm({
	maxKB: 300
});

return (
	<form {...registerReactShrinkForm} >
		<input type="file" accept="image/*" name="banner" />
	</form>
)

or as a custom component

return (
	<form>
		<ReactShrinkInput name="banner" />
	</form>
)

Benefits

• reduce boilerplate
• keep forms semantic and accessibility intact
• make this a more react-ish library

How this can work

under the hood I suggest looking into listening for change events or submission events using a reference.