0.1.6 • Published 1 year ago
ds-lib-praisindo v0.1.6
DS Library Praisindo
DS Library Praisindo is a collection of reusable React components built with Material-UI. These components are designed to help developers quickly create beautiful and responsive user interfaces.
Installation
You can install DS Library Praisindo using npm:
npm install ds-library-praisindo
Components
Button Component
The Button
component is a customizable button that can be used for triggering actions or submitting forms.
Props
Name | Type | Description |
---|---|---|
bgColor | string | The background color of the button. Default is #0D6EFD . |
color | string | The text color of the button. Default is white . |
size | "small" | "medium" | "large" | The size of the button. Default is small . |
borderRadius | string | The border radius of the button. Default is 50px . |
fontSize | string | The font size of the button text. Default is 16px . |
label | string | The text displayed on the button. Default is "Button Text" . |
disableElevation | boolean | If true , the button will not have elevation. Default is false . |
startIcon | React.ReactNode | The icon displayed before the button text. |
loading | boolean | If true , a loading spinner will be displayed inside the button. |
endIcon | React.ReactNode | The icon displayed after the button text. |
variant | "contained" | "outlined" | The variant of the button. Default is contained . |
onClick | () => void | A callback function that is called when the button is clicked. |
disabled | boolean | If true , the button will be disabled. |
fullWidth | boolean | If true , the button will take up the full width of its container. Default is false . |
Example Usage
import React from "react";
import Button from "./Button";
const MyComponent = () => {
const handleClick = () => {
alert("Button clicked!");
};
return (
<>
<Button onClick={handleClick} variant="contained" color="primary">
Click Me
</Button>
<br />
<Button
onClick={handleClick}
variant="outlined"
color="secondary"
startIcon={<Icon />}
endIcon={<Icon />}
loading={false}
disabled={false}
fullWidth={false}
>
Submit
</Button>
</>
);
};
export default MyComponent;
Here is the documentation for the TextInput
component:
TextInput Component
Description
The TextInput
component is a customizable text input field that can be used for entering text or selecting options from a dropdown menu.
Props
Name | Type | Description . |
---|---|---|
type | "text" | "select" | The type of input field. If set to "select", a dropdown menu will be rendered. Default is "text". |
label | string | The label displayed above the input field. |
name | string | The name of the input field. |
onChange | (event: React.ChangeEvent) => void | A callback function that is called when the input value changes. |
value | string | number | The current value of the input field. |
variant | "outlined" | "filled" | "standard" | The variant of the input field. Default is "outlined". |
size | "small" | "medium" | The size of the input field. Default is "small". |
error | boolean | If true , the input field will be displayed in an error state. |
helperText | string | The helper text displayed below the input field. |
placeholder | string | The placeholder text displayed in the input field. |
selectOptions | string[] | An array of options for a select input field. |
onBlur | (event: React.FocusEvent) => void | A callback function that is called when the input field loses focus. |
InputProps | object | Additional props to pass to the input element. |
sx | object | The custom styles to apply to the input field. |
...restProps | any | Any additional props to pass to the TextField component. |
Example Usage
import React, { useState } from "react";
import TextInput from "./TextInput";
const MyComponent = () => {
const [text, setText] = useState("");
const [selectedOption, setSelectedOption] = useState("");
const handleTextChange = (event) => {
setText(event.target.value);
};
const handleSelectChange = (event) => {
setSelectedOption(event.target.value);
};
return (
<>
<TextInput
type="text"
label="Enter Text"
name="text"
onChange={handleTextChange}
value={text}
variant="outlined"
size="small"
placeholder="Enter text here"
/>
<br />
<TextInput
type="select"
label="Select Option"
name="select"
onChange={handleSelectChange}
value={selectedOption}
variant="outlined"
size="small"
selectOptions={["Option 1", "Option 2", "Option 3"]}
/>
</>
);
};
export default MyComponent;