# reactjs-giphy

> React component to work with GIFs

Latest version **1.0.3** (published 2019-04-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install reactjs-giphy
pnpm add reactjs-giphy
yarn add reactjs-giphy
bun add reactjs-giphy
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2019-04-14 |
| First published | 2019-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 592.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ghazaryanarmans |
| Keywords | react-giphy, reactjs-giphy, giphy, gif, giphy-react, react giphy |

## Links

- npm: https://www.npmjs.com/package/reactjs-giphy
- npm.io page: https://npm.io/package/reactjs-giphy

## Alternatives

- [@mce/gif](https://npm.io/package/@mce/gif.md) — 2.6K weekly downloads
- [cleanse](https://npm.io/package/cleanse.md) — 173 weekly downloads
- [str](https://npm.io/package/str.md) — 127 weekly downloads
- [naming](https://npm.io/package/naming.md) — 95 weekly downloads
- [tap-telco-api](https://npm.io/package/tap-telco-api.md) — 19 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2019-04-14
- 1.0.2 — 2019-04-14
- 1.0.1 — 2019-04-14
- 1.0.0 — 2019-04-14

## README

# reactjs-giphy

> React component to work with GIFs (Giphy API)

## Install

```bash
npm install reactjs-giphy
```

## Usage


### Trending
```jsx
import React, { Component } from 'react'

import Giphy from 'reactjs-giphy'

class Example extends Component {
  renderContent({ data }) {
    return data.map(gif => <img key={gif.id} src={gif.images.preview.url} />)
  } 

  render () {
    return (
      <Giphy render={this.renderContent} />
    )
  }
}
```

### By GIF ID
```jsx
import React, { Component } from 'react'

import Giphy from 'reactjs-giphy'

class Example extends Component {
  renderContent({ data }) {
    return (<img src={gif.images.preview.url} />)
  } 

  render () {
    return (
      <Giphy id={someId} render={this.renderContent} />
    )
  }
}
```

# Props

###render 
handler returns gifs from Giphy API (required, function)
###id
gif ID that should be fetched from Giphy API (string)
###searchTerm 
search gifs by title (string)
###offset
skip some count gifs from start (number)
###apiKey
Giphy API api key (string)
###upload
upload provided Gif (object ex. {username: 'John', src: 'Some gif source'})
###sortBy
Sort by Gif's uploaded time (string ex. 'ASC', 'DESC')

## License

MIT © [ArmanGhazaryan94](https://github.com/ArmanGhazaryan94)

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