Webixu React Hooks
This repository contains a collection of custom React hooks that can be used to simplify and enhance the development of React applications.
Installation
You can install Webixu React Hooks using npm:
npm install webixu-react-hooksUsage
To use Webixu React Hooks, simply import the hooks you need into your project:
import { useForceRender } from 'webixu-react-hooks';Available Hooks
useForceRender
A custom hook that returns a function to force a component to re-render. This can be useful in cases where a component needs to update its rendering without any changes to its props or state.
Example usage:
import { useCallback } from 'react';
import { useForceRender } from 'webixu-react-hooks';
type Props = {};
const MyComponent = (): React.FunctionComponent<Props> => {
const forceRender = useForceRender();
const handleClick = useCallback(() => {
// Call the forceRender function to trigger a re-render of the component
forceRender();
}, []);
return (
<div>
<button onClick={handleClick}>Force re-render</button>
</div>
);
};useRefs
A custom hook that returns an object with refs to multiple elements. This can be useful in cases where a component needs to reference multiple elements and track their state.
Example usage:
import { useCallback } from 'react';
import { useRefs } from 'webixu-react-hooks';
type Refs = {
element: HTMLDivElement;
input: HTMLInputElement;
};
type Props = {};
const MyComponent: React.FunctionComponent<Props> = () => {
const refs = useRefs<Refs>();
const handleClick = useCallback(() => {
refs.input.current?.focus();
}, []);
return (
<div ref={refs.element}>
<input type='text' ref={refs.input} />
<button onClick={handleClick}>Focus Input</button>
</div>
);
};
export default MyComponent;useRenderCounter
A custom hook that logs the number of times a component is rendered. This can be useful in cases where a component is re-rendering too often and you want to optimize its performance.
Example usage:
import { useRenderCounter } from 'webixu-react-hooks';
type Props = {};
const MyComponent: React.FunctionComponent<Props> = () => {
useRenderCounter('MyComponent');
return (
<div>
<p>Hello, world!</p>
</div>
);
};
export default MyComponent;License
This project is licensed under the terms of the MIT license. See the LICENSE file for details.