# react-marquee-component

> Here's a simple README example:

Latest version **1.1.7** (published 2023-10-01) · 0 weekly downloads

## Install

```sh
npm install react-marquee-component
pnpm add react-marquee-component
yarn add react-marquee-component
bun add react-marquee-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2023-10-01 |
| First published | 2023-10-01 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 11.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | prakhar36 |

## Links

- npm: https://www.npmjs.com/package/react-marquee-component
- npm.io page: https://npm.io/package/react-marquee-component

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0

## Recent versions

- 1.1.7 (latest) — 2023-10-01
- 1.1.6 — 2023-10-01
- 1.1.5 — 2023-10-01
- 1.1.4 — 2023-10-01
- 1.1.3 — 2023-10-01
- 1.1.2 — 2023-10-01
- 1.1.1 — 2023-10-01
- 1.1.0 — 2023-10-01
- 1.0.9 — 2023-10-01
- 1.0.8 — 2023-10-01
- 1.0.7 — 2023-10-01
- 1.0.6 — 2023-10-01
- 1.0.5 — 2023-10-01
- 0.0.4 — 2023-10-01
- 0.0.3 — 2023-10-01
- … 3 more at https://npm.io/package/react-marquee-component/versions

## README

Here's a simple README example:

# Marquee React Component

## Installation

To use the MarqueeText React component, you need to follow these steps:

1. Install the component:

   ```bash
   npm install react-marquee-component
   ```

2. Import the component in your React application:

   ```jsx
   import React from "react";
   import { MarqueeText } from "react-marquee-component";

   const App = () => {
     const marqueeTextData = [
       { id: 1, text: "HTML" },
       { id: 2, text: "CSS" },
       { id: 3, text: "JS" },
       // ... more text data
     ];

     const customStyles = {
       // Define your custom styles here
       color: "red",
       fontSize: "20px",
       // ... other styles
     };

     return <MarqueeText data={marqueeTextData} style={customStyles} />;
   };

   export default App;
   ```

3. Customize the `marqueeTextData` array with your data.

4. Adjust the `customStyles` object to apply your desired custom styles.

5. Run your React application:

   ```bash
   npm start
   ```

Now, the MarqueeText component will display your text data with the specified styles in a marquee animation.

## Props

### `data`

- **Type**: Array of objects
- **Description**: An array of objects representing the text data for the MarqueeText component.

### `style` (optional)

- **Type**: Object
- **Description**: An optional object containing custom styles to be applied to the list items. Customize it according to your preferences.

## Example

```jsx
import React from "react";
import { MarqueeText } from "react-marquee-component";

const App = () => {
  const marqueeTextData = [
    { id: 1, text: "HTML" },
    { id: 2, text: "CSS" },
    { id: 3, text: "JS" },
    // ... more text data
  ];

  const customStyles = {
    color: "red",
    fontSize: "20px",
    // ... other styles
  };

  return <MarqueeText data={marqueeTextData} style={customStyles} />;
};

export default App;

```

---
_Source: https://npm.io/package/react-marquee-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._