📚 Introducing react-tools: A Toolbox for Streamlining React Development

Introducing @galiprandi/react-tools: A Toolbox for Streamlining React Development

Are you looking to simplify your React development process? Look no further than @galiprandi/react-tools. This comprehensive package offers a range of intuitive utilities designed to enhance your React applications. Let's explore some of its key components and hooks:

Playground

Before diving into the details, why not take a test drive? Visit the @galiprandi/react-tools Playground to experiment with the components firsthand.

Installation

Getting started is a breeze. Simply install the package using your preferred package manager:

npm i @galiprandi/react-tools

pnpm i @galiprandi/react-tools

yarn add @galiprandi/react-tools

Components

<Form />

Simplify form creation with the <Form /> component. This component wraps the form HTML tag, offering a straightforward approach to building forms in your React application. Additional props like onSubmitValues and filterEmptyValues provide enhanced functionality.

<Input />

Enhance user input experiences with the <Input /> component. This reusable input wrapper adds consistency to your forms and accepts various props for customization, including label, onChangeValue, and debounceDelay.

<DateTime />

Need date and time input functionality? Look no further than the <DateTime /> component. This wrapper around the native input element with type="datetime-local" offers convenient date selection with additional props for customization.

<Dialog />

Create accessible dialogs and modals effortlessly with the <Dialog /> component. This wrapper around the dialog HTML tag simplifies dialog creation, with options for defining behavior, callbacks, and content.

<Observer />

Track element visibility with the <Observer /> component. Whether you're implementing lazy loading images or infinite scrolling, this component offers a straightforward solution for monitoring viewport interactions.

Hooks

useDebounce()

Streamline asynchronous operations with the useDebounce() hook. This simple yet powerful hook accepts a value and delay, returning a debounced value to optimize performance.

Contribution

Your contributions are valuable! Whether it's bug fixes, feature enhancements, or documentation improvements, contributions are welcome. Simply fork the repository, make your changes, and open a pull request.

License

@galiprandi/react-tools is licensed under the MIT License, providing flexibility for both personal and commercial use.

Ready to simplify your React development workflow? Install @galiprandi/react-tools today and experience the difference firsthand. Happy coding!