# react-freezeframe

> React wrapper for freezeframe.js

Latest version **5.0.2** (published 2021-01-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-freezeframe
pnpm add react-freezeframe
yarn add react-freezeframe
bun add react-freezeframe
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.2 |
| Published | 2021-01-31 |
| First published | 2019-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 11.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nick Ford |
| Maintainers | nickforddesign |
| Keywords | freezeframe, react, gif |

## Links

- npm: https://www.npmjs.com/package/react-freezeframe
- Repository: https://github.com/ctrl-freaks/freezeframe.js
- Homepage: https://github.com/ctrl-freaks/freezeframe.js/packages/react-freezeframe
- Issues: https://github.com/ctrl-freaks/freezeframe.js/issues
- npm.io page: https://npm.io/package/react-freezeframe

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 5.0.2 (latest) — 2021-01-31
- 5.0.1 — 2021-01-15
- 5.0.0 — 2021-01-10
- 4.1.3 — 2020-03-15
- 4.1.2 — 2020-03-15
- 4.1.0 — 2020-02-20
- 4.0.0 — 2019-10-14
- 4.0.0-alpha.7 — 2019-07-10

## README

# react-freezeframe

[![npm version](https://badge.fury.io/js/react-freezeframe.svg)](https://badge.fury.io/js/react-freezeframe)
![Size](https://img.shields.io/github/size/ctrl-freaks/freezeframe.js/packages/react-freezeframe/dist/ReactFreezeframe.js.svg)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## Examples

GH Pages:

http://ctrl-freaks.github.io/freezeframe.js/react

## Project setup

```bash
npm install freezeframe react-freezeframe
```

## Basic usage

```jsx
import React from 'react';
import { render } from 'react-dom';
import ReactFreezeframe from 'react-freezeframe';

const App = () => {
  return (
    <ReactFreezeframe src="foo.gif" />
  );
};

render(<App />, document.getElementById('root'));
```

## Advanced usage

Here's an example of passing custom options, and binding to a ref so we can manually trigger playback.

```jsx
import React { Component, createRef } from 'react';
import ReactFreezeframe from 'react-freezeframe';

class App extends Component {
  constructor(props) {
    super(props);
    this.freeze = createRef();
  }
  render() {
    return (
      <div>
        <ReactFreezeframe
          src="foo.gif"
          ref={this.freeze}
          options={{
            trigger: false,
            overlay: true
          }}
          onToggle={(items, isPlaying) => this.logEvent('toggle', items, isPlaying)}
          onStart={(items) => this.logEvent('start', items)}
          onStop={(items) => this.logEvent('stop', items)}
        />
        <button onClick={() => this.start()}>Start</button>
        <button onClick={() => this.stop()}>Stop</button>
        <button onClick={() => this.toggle()}>Toggle</button>
      </div>
    );
  }
  start() {
    this.freeze.current.start();
  }
  stop() {
    this.freeze.current.stop();
  }
  toggle() {
    this.freeze.current.toggle();
  }
  logEvent(event, items, isPlaying) {
    console.log(event, items, isPlaying);
  }
}

export default App;
```

## TypeScript

Here's the same example, in TypeScript.

```tsx
import React, { Component, createRef } from 'react';
import ReactFreezeframe from 'react-freezeframe';
import { Freeze } from 'freezeframe/types'

class App extends Component {
  private freeze = createRef<ReactFreezeframe>();

  render() {
    return (
      <div>
        <ReactFreezeframe
          src="foo.gif"
          ref={this.freeze}
          options={{
            trigger: false,
            overlay: true
          }}
          onToggle={(items, isPlaying) => this.logEvent('toggle', items, isPlaying)}
          onStart={(items, isPlaying) => this.logEvent('start', items, isPlaying)}
          onStop={(items, isPlaying) => this.logEvent('stop', items, isPlaying)}
        />
        <button onClick={() => this.start()}>Start</button>
        <button onClick={() => this.stop()}>Stop</button>
        <button onClick={() => this.toggle()}>Toggle</button>
      </div>
    );
  }
  start(): void {
    this.freeze.current?.start();
  }
  stop(): void {
    this.freeze.current?.stop();
  }
  toggle(): void {
    this.freeze.current?.toggle();
  }
  logEvent(event: string, items: Freeze[], isPlaying: boolean): void {
    console.log(event, items, isPlaying);
  }
}

export default App;
```

## Children

You can also pass gifs as children, they will all inherit the any options passed to the parent component.

```jsx
<ReactFreezeframe
  options={{
    trigger: 'click'
  }}
>
  <img src="foo1.gif" />
  <img src="foo2.gif" />
  <img src="foo3.gif" />
</ReactFreezeframe>
```

## Props

### Options

The `options` prop accepts all options allowed by [freezeframe core](../freezeframe#options)

```jsx
<ReactFreezeframe
  src="foo.gif"
  options={{
    overlay: true,
    trigger: 'click'
  }}
/>
```

### Callbacks

The following callback props will fire when freezeframe emits the corresponding events:

- onStart - 'start'
- onStop - 'stop'
- onToggle - 'toggle'

```jsx
<ReactFreezeframe
  src="./something.gif"
  onStart={(items) => this.onStart(items)}
  onStop={(items) => this.onStop(items)}
  onToggle={(items, isPlaying) => this.onToggle(items, isPlaying)}
/>
```

## Contributing

Assuming you have already read the [instructions](../../README.md#contributing) in the project root:

- First, `cd` into the appropriate package directory

```bash
# start webpack dev server
npm start
```

```bash
# lint and fix issues with eslint
npm run lint -- --fix
```

```bash
# build the project and examples for gh-pages
npm run build
```

Then commit your changes and submit your PR for review.

## License

react-freezeframe.js is released under the terms of the MIT License.

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