@react-solutions/inputs

Quick highlights:

• Exports two families: direct controlled components and react-hook-form wrappers.
• Built with TypeScript. Declarations are emitted on build.

Install

Install the package and peer dependencies in the consuming app:

npm install @react-solutions/inputs
# ensure peer deps exist in the host app:
npm install react react-dom @mui/material @emotion/react @emotion/styled  react-hook-form date-fns

Usage

1. controlled components (use with useState)

Example: @react-solutions/inputs demonstrates using components like TextInputField and SelectInputField with value / onChange props.

import { TextInputField, SelectInputField } from "@react-solutions/inputs";
// in component:
<TextInputField
	name="name"
	value={name}
	onChange={(e) => setName(e.target.value)}
/>;

2. react-hook-form wrappers (preferred when using react-hook-form)

Example: @react-solutions/inputs shows usage of FormInputTextField, FormInputSelect, etc.

import { FormInputTextField, FormInputSelect } from "@react-solutions/inputs";
// inside a form using react-hook-form's control:
<FormInputTextField
	name="email"
	label="Email"
	control={control}
	errors={errors}
/>;

Peer dependencies

This package declares several peerDependencies. Consumers must provide compatible versions of:

• react, react-dom
• @mui/material, @emotion/react, @emotion/styled
• @mui/x-date-pickers (for date/time inputs)
• react-hook-form (for HookForm wrappers)
• date-fns

See package.json for exact version ranges.

🌍 Browser Support

| Browser | Version | Status | | ----------------------------------------------------------------------------- | ------- | ------------ | | | 60+ | ✅ Supported | | | 60+ | ✅ Supported | | | 12+ | ✅ Supported | | | 79+ | ✅ Supported |

License

MIT

📝 TypeScript Support

This package is written in TypeScript and includes full type definitions. All exported functions and hooks are fully typed.

Made with ❤️ for React developers