0.1.6 • Published 1 year ago

ds-lib-praisindo v0.1.6

Weekly downloads
-
License
-
Repository
-
Last release
1 year ago

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

NameTypeDescription
bgColorstringThe background color of the button. Default is #0D6EFD.
colorstringThe text color of the button. Default is white.
size"small" | "medium" | "large"The size of the button. Default is small.
borderRadiusstringThe border radius of the button. Default is 50px.
fontSizestringThe font size of the button text. Default is 16px.
labelstringThe text displayed on the button. Default is "Button Text".
disableElevationbooleanIf true, the button will not have elevation. Default is false.
startIconReact.ReactNodeThe icon displayed before the button text.
loadingbooleanIf true, a loading spinner will be displayed inside the button.
endIconReact.ReactNodeThe icon displayed after the button text.
variant"contained" | "outlined"The variant of the button. Default is contained.
onClick() => voidA callback function that is called when the button is clicked.
disabledbooleanIf true, the button will be disabled.
fullWidthbooleanIf 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

NameTypeDescription .
type"text" | "select"The type of input field. If set to "select", a dropdown menu will be rendered. Default is "text".
labelstringThe label displayed above the input field.
namestringThe name of the input field.
onChange(event: React.ChangeEvent) => voidA callback function that is called when the input value changes.
valuestring | numberThe 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".
errorbooleanIf true, the input field will be displayed in an error state.
helperTextstringThe helper text displayed below the input field.
placeholderstringThe placeholder text displayed in the input field.
selectOptionsstring[]An array of options for a select input field.
onBlur(event: React.FocusEvent) => voidA callback function that is called when the input field loses focus.
InputPropsobjectAdditional props to pass to the input element.
sxobjectThe custom styles to apply to the input field.
...restPropsanyAny 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;