This npm package provides a set of reusable React components and a custom hook for convenient development of React applications.
To install this package, use the following npm command:
npm install react-handy-tools
A customizable button component for React applications.
-
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.
<Button
label="Click me"
width={150}
height={50}
fontSize={16}
fontColor="black"
backgroundColor="yellow"
borderRadius={5}
/>
A flexible container component with support for various flexbox properties.
-
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.
<FlexBox
flexDirection="row"
alignItems="center"
justifyContent="space-between"
gap={10}
>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</FlexBox>
A custom hook for making HTTP requests using axios.
-
apiHost
(string): The base URL of the API. -
endpoint
(string): The API endpoint. -
param
(string or number, optional): Additional parameter for the API endpoint
const { data, isLoading, isError, refetch } = useFetch({
apiHost: 'https://api.example.com',
endpoint: 'data',
param: 'exampleParam'
});