0.3.2 • Published 6 months ago
react-ts-droid-button v0.3.2
DroidButton is a customizable React component for creating buttons with various styling options. It's written in TypeScript for better type safety and maintainability.
Features
- Customizable appearance (background color, text color, dimensions)
- Configurable margins
- Optional icon support
- Disabled state handling
- TypeScript support for type safety
Installation
To use the Button component in your React application, install it via npm:
npm install react-ts-droid-buttonUsage
To use the Button component, import it and provide the required props:
import { Button } from "react-ts-droid-button";
<DroidButton
title="Click me"
bgColor="#007bff"
color="#ffffff"
mTop={10}
mBottom={10}
mLeft={0}
mRight={0}
width={400}
braduis={10}
icon={<FaBookReader className="style-home-icon" />}
onClickButton={() => console.log("Button clicked")}
/>;Props
The Button component accepts the following props:
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | The text to display on the button |
bgColor | string | Yes | The background color of the button |
color | string | Yes | The text color of the button |
mTop | number | Yes | Margin top |
mBottom | number | Yes | Margin bottom |
mLeft | number | Yes | Margin left |
mRight | number | Yes | Margin right |
fWeight | number | No | Font weight of the button text |
height | number | No | Height of the button |
width | number | No | Width of the button |
disabled | boolean | No | Whether the button is disabled |
disabledColor | string | No | Background color when the button is disabled |
icon | React.ReactNode | No | Icon to display alongside the button text |
onClickButton | () => void | Yes | Function to call when the button is clicked |
The Button component provides a flexible and customizable way to create buttons in your React application. With its various styling options and TypeScript support, it can easily be integrated into your project and styled to match your design requirements.