0.0.2 • Published 2 years ago

my-new-btn v0.0.2

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

updapt-button

A reusable button component for your JavaScript/Typescript React applications.

Installation

You can install the component using npm :

npm install @updapt/updapt-button

Usage

To use the updapt-button component in your application, import it and include it in your JSX code:

import React, { useState } from "react";
import { UpdaptButton } from "@updapt/updapt-button";
import { UpdaptInput } from "@updapt/updapt-input";

const MyForm: React.FC = () => {
  const [inputValue, setInputValue] = useState("");
  //error states
  const[error,setError] = useState(false)
// inputValue change
  const handleInputChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    const{value} = event.target
    setInputValue(value);
    setError(false);
  };
  //validation for empty fields
  const validate=()=>{
    if (!inputValue.trim()) {
      setError(true);
    } else {
      setError(false);
    }
  }
  //handle save changes
  const handleSave=()=>{
     validate()
     //API code for saving
  }
  return (
    <form>
      <h2>My Form</h2>
      <UpdaptInput
        value={inputValue}
        type="text"
        onChange={(event)=>handleInputChange(event)}
        placeholder="Enter your name"
        isError={error}
       />
      <p>Hello, {inputValue}!</p>
     <UpdaptButton
        children="Submit"
        size="md"
        variant="primary-button-with-svg"
        src={images.addButton}
        onClick={handleSave}
      />
    </form>
  );
}
```


#### PROPS

The  ```updapt-input``` component accepts the following props:
PropTypeDescription
childrenstringName of the Button
size"sm" , "md" , "lg"Size of the Button.
variantstringclassName with button varient
srcstringif button has svg image init
disabledbooleanfor disabling the button

VARIANT: `"primary-button"

"secondary-button"

"primary-button-with-svg"

"secondary-button-with-svg"

"secondary-button-red"

"secondary-button-red-with-svg"

"secondary-button-cancel"

## Contributing
Contributions are welcome! If you find any issues or want to add new features, please submit a pull request.

Before contributing, please read our contributing guidelines.

## License
This project is licensed under the MIT License. See the LICENSE file for details.

MIT &copy; [UPDAPT TEAM]

Feel free to customize the content according to your project's requirements and specifications.