shadcn-ui-ellipsis

A React component that displays an animated ellipsis, customizable with various styles, animations, and options.

Installation

To install the package, use npm or yarn:

npm install shadcn-ui-ellipsis
# or
yarn add shadcn-ui-ellipsis

Usage

Import and use the Ellipsis component in your React project:

import React from "react";
import { Ellipsis } from "shadcn-ui-ellipsis";

function App() {
  return (
    <div>
      <h1>Ellipsis Component Example</h1>
      <Ellipsis variant="primary" size="lg" maxDots={5} speed={300} />
    </div>
  );
}

export default App;

Props

| Prop Name | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------------------------------------- | | variant | "default" \| "primary" \| "secondary" \| "destructive" \| "success" \| "warning" \| "ghost" \| "link" | "default" | Sets the color variant of the ellipsis. | | size | "default" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" | "default" | Controls the size of the ellipsis text. | | animation | "default" \| "bounce" \| "pulse" | "default" | Sets the animation style for the ellipsis. | | speed | number | 500 | The speed in milliseconds for the ellipsis animation cycle. | | maxDots | number | 3 | The maximum number of dots displayed before resetting. | | inline | boolean | true | Sets whether the ellipsis is displayed inline or as a block. | | alignment | "start" \| "center" \| "end" | "center" | Aligns the ellipsis content within the container. | | asChild | boolean | false | If true, allows the ellipsis component to inherit the behavior of its parent. |

Example Usages

<Ellipsis variant="success" size="xl" maxDots={4} speed={200} animation="pulse" />
<Ellipsis variant="warning" size="sm" maxDots={2} />
<Ellipsis inline={false} alignment="start" />

Customization

You can customize the appearance and behavior of the Ellipsis component using the available props. This makes it adaptable for various use cases, from loading indicators to subtle animations in your UI.

License

This package is licensed under the MIT License. See the LICENSE file for more information.

Contributing

Contributions are welcome! Please read the contributing guidelines for details on how to submit a pull request or open issues.