Button

Buttons trigger an action in a web page. It allows the developer to handle an action on user interaction.

Preview

Usage

The button text can be changed, and it uses a onclick prop which is handled internally.

npm i react-hartan

import { Button } from "react-hartan"

function App() {

  return (
    <>
      <Button></Button>
    </>
  )
}

export default App

Customization With Props

• buttonText -> Accepts a node/string type, sent by the user which is shown as the button name.

• onClickFunction -> Accepts a function, written by the user, which handles the logic when the button is clicked.

• id -> The id prop is similar to the id attribute in HTML. It allows to provide overall component id.

• userButtonStyle -> Custom styling prop that accepts the classes written by the user, which defines the custom styling for the button component.

Default

import { Button } from "react-hartan"

function App() {

  return (
    <>
      <Button></Button>
    </>
  )
}

export default App

With Custom Props

// App.css
.my-class{
   font-size: 2rem;
   background-color: red;
}

// App.jsx
import { Button } from "react-hartan"
import "./App.css"

function App() {

const btnTxt = "Custom Text";

async function onclick() {

    async function fetchData() {
      const response = await fetch("https://farzi-vichar-api.vercel.app/language/hindi/random");
      const result = await response.json();

      return result;
    }

    const data = await fetchData();
    console.log(data);
  }


  return (
    <>
      <Button buttonText={btnTxt} onClickFunction={onclick} userButtonStyle={"my-class"}></Button>
    </>
  )
}

export default App

Component Code

This is the code for the Button component.

Button.jsx

import buttonStyles from "./button.module.css"
import PropTypes from "prop-types"

export default function Button({ buttonText = "Hartan", id, userButtonStyle, onClickFunction }) {

    function handleClick(){
        onClickFunction();
    }

    return (
        <button className={`${buttonStyles.generalBtn} ${userButtonStyle}`} onClick={handleClick}>{buttonText}</button>
    )
}

Button.propTypes = {
    buttonText: PropTypes.node,
    id: PropTypes.string,
    userButtonStyle: PropTypes.string,
    onClickFunction: PropTypes.func
};

Button.module.css

/* Button CSS Module */

/* Button style on normal state */
.generalBtn{
    outline: none;
    border: none;
    background: transparent;
    font-size: 1.3rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border: transparent;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    background: #1e90ff;
    color: #ffffff;
    border-radius: 4px;
}

/* Button style on hover */
.generalBtn:hover {
    background: rgb(2, 0, 36);
    background: linear-gradient(90deg, rgba(30, 144, 255, 1) 0%, rgba(0, 212, 255, 1) 100%);
}

/* Button style when active */
.generalBtn:active {
    transform: translate(0em, 0.2em);
}