# @xiping/react-components

A modern React component library built with TypeScript, providing rich animation components, media components, and interactive components.

## Documentation & Demo

[View Documentation and Demo](https://xiping-react-components.vercel.app/)

## Installation

```shell
npm i @xiping/react-components
# or
yarn add @xiping/react-components
# or
pnpm add @xiping/react-components
```

## Usage

### Basic Import

```tsx
import { ShinyButton, BlurFade } from "@xiping/react-components";

function App() {
  return (
    <div>
      <ShinyButton>Click me</ShinyButton>
      <BlurFade>
        <h1>Hello World</h1>
      </BlurFade>
    </div>
  );
}
```

### Global Styles (Optional)

If your project uses Tailwind CSS, you can import the global styles:

```tsx
import "@xiping/react-components/style.css";
```

## Requirements

- **React**: >= 18 || >= 19
- **React DOM**: >= 18 || >= 19

## Components

### Text Animations

- `BlurFade` - Blur fade-in animation
- `BlurText` - Blur text effect
- `TypingAnimation` - Typewriter effect
- `TextType` - Text type animation
- `SplitText` - Text split animation
- `FlipText` - Text flip animation
- `GradientText` - Gradient text
- `HyperText` - Hyperlink text effect
- `MorphingText` - Text morphing animation
- `VariableProximity` - Variable proximity effect
- `ComicText` - Comic-style text
- `TextAnimate` - Generic text animation
- `SparklesText` - Sparkling text effect
- `ShinyText` - Shiny text

### Buttons

- `ShinyButton` - Shiny button
- `ShimmerButton` - Shimmer button
- `ConfettiButton` - Confetti celebration button

### Media

- `VideoSubtitlePlayer` - Video subtitle player
- `SubtitlePlayer` - Subtitle player
- `VideoDialog` - Video dialog
- `ImageViewer` - Image viewer
- `ImageCompare` - Image comparison
- `DomeGallery` - Dome gallery

### Interactions

- `ScratchToReveal` - Scratch card effect
- `Pointer` - Custom pointer
- `PinchContent` - Pinch to zoom
- `Dock` - macOS-style Dock
- `ReactForceGraph3D` - 3D force-directed graph
- `Message` - Message toast

### Editors

- `TxtEditor` - Text editor
- `TxtReader` - Text reader

### Learning / Question

English quiz UI under the `Question` namespace. **You must pass `platform: "pc" | "mobile"`** — the library does not auto-detect the device.

- `Question.SingleChoice` — single choice (pick one)
- `Question.MultipleSelect` — multiple choice
- `Question.TrueFalse` — true / false
- `Question.Matching` — tap to pair (stacked on mobile, two columns on PC)
- `Question.SentenceOrder` — reorder words (drag on PC, arrow buttons on mobile)

```tsx
import { Question, getQuestionPlatformFromViewport } from "@xiping/react-components";

const platform = getQuestionPlatformFromViewport(window.innerWidth);

<Question.SingleChoice
  platform={platform}
  stem="The word 'reluctant' means ___."
  options={options}
  value={answer}
  onChange={setAnswer}
/>;
```

## License

MIT