# insta-react

> Insta-react is a simple React component for displaying instagram account or hashtag post images.

Latest version **1.0.6** (published 2021-02-17) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2021-02-17 |
| First published | 2020-12-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 23.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | redsquirrelstudio |
| Maintainers | redsquirrelstudio |

## Links

- npm: https://www.npmjs.com/package/insta-react
- Repository: https://github.com/redsquirrelstudio/insta-react
- Homepage: https://github.com/redsquirrelstudio/insta-react#readme
- Issues: https://github.com/redsquirrelstudio/insta-react/issues
- npm.io page: https://npm.io/package/insta-react

## Recent versions

- 1.0.6 (latest) — 2021-02-17
- 1.0.5 — 2020-12-26
- 1.0.3 — 2020-12-26
- 1.0.2 — 2020-12-26
- 1.0.1 — 2020-12-26

## README

# [DEPRECATED] Insta-react <img width=25 src="https://devicon.dev/devicon.git/icons/react/react-original.svg"> <img width=25 src="https://instagram-brand.com/wp-content/uploads/2016/11/Instagram_AppIcon_Aug2017.png?w=300">

[Warning] Insta-react will no longer function due to the new CORS policy Instagram has added to the endpoint the component used to get data.
Please migrate to using Instagram's basic display API here: <a href="https://developers.facebook.com/docs/instagram-basic-display-api"> https://developers.facebook.com/docs/instagram-basic-display-api </a>

Insta-react is a simple React component for displaying instagram account or hashtag post images.

#### <a href="https://github.com/redsquirrelstudio/insta-react">Github Repo</a> <img width=20 src="https://devicon.dev/devicon.git/icons/github/github-original.svg" >
#### <a href="https://www.npmjs.com/package/insta-react">NPM</a> <img width=20 src="https://devicon.dev/devicon.git/icons/npm/npm-original-wordmark.svg" >

## Installation
Insta-react can be installed with both npm and yarn as usual.
```bash
npm install insta-react

yarn add insta-react
```

And then can be imported into your project.
```js
import InstaReact from "insta-react";
```

## Configuration

Insta-react takes the following props for configuration:
<table>
    <thead>
        <th>Prop</th>
        <th>Type</th>
        <th>Default</th>
        <th>Function</th>
    </thead>
    <tbody>
        <tr>
            <td>tag</td>
            <td>String</td>
            <td>N/A, Required</td>
            <td>The username or hashtag that you would like posts to be pulled from hashtags should be prefixed with '#'.</td>
        </tr>
        <tr>
            <td>quantity</td>
            <td>Integer</td>
            <td>4</td>
            <td>The number of posts you would like to be shown.</td>
        </tr>
        <tr>
            <td>cols</td>
            <td>Integer</td>
            <td>4</td>
            <td>The number of posts to be shown in a row before wrapping.</td>
        </tr>
         <tr>
            <td>links</td>
            <td>Boolean</td>
            <td>false</td>
            <td>When true, clicking on a post image will link to it on Instagram</td>
        </tr>
         <tr>
            <td>descriptions</td>
            <td>Boolean</td>
            <td>false</td>
            <td>When true, post captions will be shown for each post.</td>
        </tr>
    </tbody>
</table>

## Example
```js
import React from 'react';
import InstaReact from 'insta-react';

const App = () => {
    return(
        <div>
            An account feed, latest 6 posts, 5 columns.
            <InstaReact tag="redsquirrelstudio" quantity={6} cols={5} />
            
            A hashtag feed, with defaults
            <InstaReact tag="#programming" />
        </div>
    )
}

```

This component is also available for Vue.js here: https://www.npmjs.com/package/insta-vue

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