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

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

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;