my-new-btn
v0.0.2
Published
A reusable button component for your JavaScript/Typescript React applications
Downloads
3
Maintainers
Readme
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:
| Prop | Type | Description |
| ------------- | ------------------ | ----------------------------- |
| children
| string | Name of the Button |
| size
| "sm" , "md" , "lg" | Size of the Button. |
| variant
| string | className with button varient |
| src
| string | if button has svg image init |
| disabled
| boolean | for 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 © [UPDAPT TEAM]
Feel free to customize the content according to your project's requirements and specifications.