Rive Interactive

# Rive Interactive - Assets

Starter templates and examples for Rive + React integration.

## Quick Start

```bash
npm install rive-react
```

## Basic Usage

```jsx
import Rive from 'rive-react';

<Rive
  src="animation.riv"
  stateMachines="State Machine 1"
  style={{ width: '400px', height: '400px' }}
/>
```

## State Machine Example

```jsx
import { useRive, useStateMachineInput } from 'rive-react';

export default function InteractiveButton() {
  const { rive, RiveComponent } = useRive({
    src: 'button.riv',
    stateMachines: 'Button State Machine',
    autoplay: true,
  });

  const hoverInput = useStateMachineInput(rive, 'Button State Machine', 'isHovered', false);

  return (
    <div
      onMouseEnter={() => hoverInput && (hoverInput.value = true)}
      onMouseLeave={() => hoverInput && (hoverInput.value = false)}
    >
      <RiveComponent style={{ width: '200px', height: '100px' }} />
    </div>
  );
}
```

## ViewModel Example

```jsx
import { useRive, useViewModel, useViewModelInstance,
         useViewModelInstanceString } from 'rive-react';
import { useEffect } from 'react';

export default function Dashboard({ title }) {
  const { rive, RiveComponent } = useRive({
    src: 'dashboard.riv',
    autoplay: true,
    autoBind: false,
  });

  const viewModel = useViewModel(rive, { useDefault: true });
  const instance = useViewModelInstance(viewModel, { rive });
  const { setValue: setTitle } = useViewModelInstanceString('title', instance);

  useEffect(() => {
    if (setTitle) setTitle(title);
  }, [title, setTitle]);

  return <RiveComponent style={{ width: '800px', height: '600px' }} />;
}
```

## Resources

- [Rive Documentation](https://rive.app/docs)
- [React Rive GitHub](https://github.com/rive-app/rive-react)
- [Rive Community](https://rive.app/community)
- [State Machine Guide](https://rive.app/docs/state-machine)


# Rive React API Reference

Complete API reference for `rive-react` library.

## Installation

```bash
npm install rive-react
```

## Hooks

### useRive

Main hook for initializing Rive animations.

```typescript
const { rive, RiveComponent } = useRive(options);
```

**Options**:
- `src` (string): Path to .riv file
- `riveFile` (File): Preloaded Rive file
- `artboard` (string): Artboard name
- `animations` (string | string[]): Animations to play
- `stateMachines` (string | string[]): State machines to activate
- `layout` (Layout): Fit and alignment options
- `autoplay` (boolean): Auto-play animations (default: true)
- `autoBind` (boolean): Auto-bind ViewModels (default: true)
- `automaticallyHandleEvents` (boolean): Handle Rive events
- `useOffscreenRenderer` (boolean): Use off-screen renderer
- `shouldResizeCanvasToContainer` (boolean): Auto-resize canvas

### useStateMachineInput

Get state machine input reference.

```typescript
const input = useStateMachineInput(rive, stateMachineName, inputName, initialValue);
```

**Input Types**:
- Boolean: `input.value = true/false`
- Number: `input.value = 50`
- Trigger: `input.fire()`

### useViewModel

Get ViewModel reference.

```typescript
const viewModel = useViewModel(rive, { name: 'ViewModelName' });
// Or use default ViewModel
const viewModel = useViewModel(rive, { useDefault: true });
```

### useViewModelInstance

Get or create ViewModel instance.

```typescript
// Get default instance
const instance = useViewModelInstance(viewModel, { rive });

// Get named instance
const instance = useViewModelInstance(viewModel, { name: 'Instance1' });

// Create new instance
const instance = useViewModelInstance(viewModel, { useNew: true, rive });
```

### useViewModelInstanceString

Bind string property.

```typescript
const { value, setValue } = useViewModelInstanceString('propertyName', instance);
```

### useViewModelInstanceNumber

Bind number property.

```typescript
const { value, setValue } = useViewModelInstanceNumber('propertyName', instance);
```

### useViewModelInstanceColor

Bind color property (hex number).

```typescript
const { valu