1.0.1 • Published 11 months ago

buttons-package-ankitkicode v1.0.1

Weekly downloads
-
License
LICENSE
Repository
-
Last release
11 months ago

buttons-package-ankitkicode

npm version

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:

  1. Import the Button Component

Import the Button component from the package:

import {Button} from 'buttons-package-ankitkicode';
  1. 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:

  1. Import the Button Component

Import the Button component from the package:

import { TextCircleButton } from 'buttons-package-ankitkicode';
  1. 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:

  1. Import the Button Component

Import the Button component from the package:

import { BestiaButton } from 'buttons-package-ankitkicode';
  1. 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:

  1. Import the Button Component

Import the Button component from the package:

import { SkollButton } from 'buttons-package-ankitkicode';
  1. 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:

  1. Import the Button Component

Import the Button component from the package:

import { GreipButton } from 'buttons-package-ankitkicode';
  1. 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 NameTypeDescriptionRequired
textstringThe text to display inside the button.Yes
speednumberThe speed of the progress animation in milliseconds.Yes

TextCircleButton Component

Prop NameTypeDescriptionRequired
textstringThe text to display inside the button.Yes
directionstringThe direction of the text animation inside the button.No

BestiaButton Component

Prop NameTypeDescriptionRequired
textstringThe text to display inside the button.Yes

SkollButton Component

Prop NameTypeDescriptionRequired
textstringThe text to display inside the button.Yes

GreipButton Component

Prop NameTypeDescriptionRequired
textstringThe 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!

1.0.1

11 months ago

1.1.0

12 months ago

1.0.0

12 months ago