Package Exports
- buttons-package-ankitkicode
- buttons-package-ankitkicode/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (buttons-package-ankitkicode) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
buttons-package-ankitkicode
A customizable button with CSS animations, created using CSS-in-JS.
Installation
To install the package, run:
npm install buttons-package-ankitkicode
Usage- Button 1
Here's how to use the Button component in a React project:
- Import the Button Component
Import the Button component from the package:
import {Button} from 'buttons-package-ankitkicode';
- Use the Button Component
Use the Button component in your React JSX. Customize the button's text and animation speed via props:
import {Button} from 'buttons-package-ankitkicode';
const App = () => {
return (
<div>
<Button text="Go" speed={1000} />
</div>
);
};
TextCircleButton
Here's how to use the Button component in a React project:
- Import the Button Component
Import the Button component from the package:
import { TextCircleButton } from 'buttons-package-ankitkicode';
- Use the Button Component
Use the Button component in your React JSX. Customize the button's text and animation speed via props:
import {TextCircleButton } from 'buttons-package-ankitkicode';
const App = () => {
return (
<div>
<TextCircleButton text="Write Text Here.." />
</div>
)
}
export default App
BestiaButton
Here's how to use the Button component in a React project:
- Import the Button Component
Import the Button component from the package:
import { BestiaButton } from 'buttons-package-ankitkicode';
- Use the Button Component
Use the Button component in your React JSX. Customize the button's text and animation speed via props:
import { BestiaButton } from 'buttons-package-ankitkicode';
const App = () => {
return (
<div>
<BestiaButton text=" Text " />
</div>
)
}
export default App
SkollButton
Here's how to use the Button component in a React project:
- Import the Button Component
Import the Button component from the package:
import { SkollButton } from 'buttons-package-ankitkicode';
- Use the Button Component
Use the Button component in your React JSX. Customize the button's text and animation speed via props:
import {SkollButton } from 'buttons-package-ankitkicode';
const App = () => {
return (
<div>
<SkollButton text="Text Here" />
</div>
)
}
export default App
GreipButton
Here's how to use the Button component in a React project:
- Import the Button Component
Import the Button component from the package:
import { GreipButton } from 'buttons-package-ankitkicode';
- Use the Button Component
Use the Button component in your React JSX. Customize the button's text and animation speed via props:
import {GreipButton } from 'buttons-package-ankitkicode';
const App = () => {
return (
<div>
<GreipButton text="Text Here.." />
</div>
)
}
export default App
Props
Button Component
Prop Name | Type | Description | Required |
---|---|---|---|
text |
string | The text to display inside the button. | Yes |
speed |
number | The speed of the progress animation in milliseconds. | Yes |
TextCircleButton Component
Prop Name | Type | Description | Required |
---|---|---|---|
text |
string | The text to display inside the button. | Yes |
direction |
string | The direction of the text animation inside the button. | No |
BestiaButton Component
Prop Name | Type | Description | Required |
---|---|---|---|
text |
string | The text to display inside the button. | Yes |
SkollButton Component
Prop Name | Type | Description | Required |
---|---|---|---|
text |
string | The text to display inside the button. | Yes |
GreipButton Component
Prop Name | Type | Description | Required |
---|---|---|---|
text |
string | The text to display inside the button. | Yes |
License
This package is licensed under the ISC License. See the LICENSE file for more details
Author
Ankit Jatav Feel free to reach out if you have any questions or need further assistance!