React Handy Tools

This npm package provides a set of reusable React components and a custom hook for convenient development of React applications.

Installation

To install this package, use the following npm command:

npm install react-handy-tools

Components

Button

A customizable button component for React applications.

Props

• label (string): Button text.
• width (number): Button width.
• height (number): Button height.
• fontSize (number): Font size of the button text.
• fontColor (string, optional): Color of the button text. Defaults to white.
• backgroundColor (string, optional): Background color of the button. Defaults to black.
• borderRadius (number): Border radius of the button.

Example

<Button
  label="Click me"
  width={150}
  height={50}
  fontSize={16}
  fontColor="black"
  backgroundColor="yellow"
  borderRadius={5}
/>

FlexBox

A flexible container component with support for various flexbox properties.

Props

• children (ReactNode): Child elements.
• flexDirection (string): Flex container direction.
• alignItems (string): Align items within the container.
• justifyContent (string): Justify content within the container.
• flexWrap (string, optional): Flex container wrap property. Defaults to 'nowrap'.
• gap (number | 'normal', optional): Gap between flex container children. Defaults to 0.
• rowGap (number | 'normal', optional): Row gap between flex container children. Defaults to 0.
• columnGap (number | 'normal', optional): Column gap between flex container children. Defaults to 0.

Example

<FlexBox
  flexDirection="row"
  alignItems="center"
  justifyContent="space-between"
  gap={10}
>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</FlexBox>

Custom Hook

useFetch

A custom hook for making HTTP requests using axios.

Props

• apiHost (string): The base URL of the API.
• endpoint (string): The API endpoint.
• param (string or number, optional): Additional parameter for the API endpoint

Example

const { data, isLoading, isError, refetch } = useFetch({
  apiHost: 'https://api.example.com',
  endpoint: 'data',
  param: 'exampleParam'
});