npm package: @salvagr/react-instagram-data
Description: Easy way to get a beautiful media grid from any business instagram account.
Author: salvaoo
Latest version: 2.0.2

# React Instagram Data

Easy way to get a beautiful media grid from any business instagram account.

> IMPORTANT! If you wanna use this package, you need to have a App in [developers.facebook.com](https://developers.facebook.com/apps/) with a instagram graph api connected.

## Installation

```bash
npm install @salvagr/react-instagram-data
# OR
yarn add @salvagr/react-instagram-data
```

I use the `env` file to setup the functionality. Please follow the next step depending on your project.
Right now, the vars are public for client, I'm working for making these private.

NEXT.JS

```bash
# .env file
NEXT_PUBLIC_IG_ACCESS_TOKEN=...
NEXT_PUBLIC_IG_BUSINESS_ID=...
```

REACT APP 

```bash
# .env file
REACT_APP_IG_ACCESS_TOKEN=...
REACT_APP_IG_BUSINESS_ID=...
```

Example usage

```jsx
import { Instagram } from '@salvagr/react-instagram-data';

const App = () => {
  return (
    <div>
      <Instagram
        username="instagram"
      />
    </div>
  );
};

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

## Change the style

You can change the style and add your own. 
Each component has a name assigned (next table), you can use the React style to change the css of the component.

Key|Default
---|---
`profileContainer`|backgroundColor: `#F5F5F5`<br>display: 'flex'<br>alignItems: 'center'<br>maxWidth: '300px'<br>justifyContent: 'space-evenly'<br>padding: '10px'<br>borderRadius: '20px'<br>fontFamily: '#Poppins'` 
`profileImage`|borderRadius: '100vh'<br>maxWidth: '80px'
`profileDataContainer`|h2 : {<br>&ensp;margin: '0.5rem 0',<br>&ensp;fontSize: '21px'<br>}
`profileFollowsContainer`|p : {<br>&ensp;margin: '0.4rem 0',<br>&ensp;fontSize: '14px'<br>&ensp;}
`mediaContainer`|backgroundColor: `#F5F5F5`<br>display: 'flex'<br>gap: '1rem'<br>justifyContent: 'center'<br>alignItems: 'flex-start'<br>marginItems: '1rem'<br>padding: '1rem'<br>borderRadius: '20px'<br>flexWrap: 'wrap'
`mediaBox`|backgroundColor: `#fff`<br>width: '300px'<br>borderRadius: '20px'<br>display: 'flex'<br>flexDirection: 'column'<br>flexWrap: 'wrap'<br>position: 'relative'<br>zIndex: '1'<br>a: {<br>&ensp;textDecoration: 'none',<br>&ensp;color: '#121212'<br>}<br>image: {<br>&ensp;maxWidth: '100%',<br>&ensp;borderRadius: '20px',<br>&ensp;display: 'block'<br>}
`overlay`|backgroundColor: `rgba(0,0,0,0.0)`<br>transform: 'scale(0)'<br>transition: 'background .25s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0s linear .25s'<br>position: 'absolute'<br>width: '100%'<br>height: '100%'<br>top: 0<br>borderRadius: '20px'<br>fontFamily: 'Poppins'<br>content: {<br>&ensp;color: 'white',<br>&ensp;position: 'absolute',<br>&ensp;top: '50%',<br>&ensp;left: '50%',<br>&ensp;transform: 'translate(-50%, -50%),<br>&ensp;infoRows: {<br>&emsp;display: 'flex',<br>&emsp;alignItems: 'center',<br>&emsp;gap: '0.3rem'<br>&ensp;}<br>}

```jsx
import { Instagram } from '@salvagr/react-instagram-data';

const App = () => {
  return (
    <div>
      <Instagram
        username="instagram"
        style={{
          profileContainer: {
            backgroundColor: '#FFAAAA'
          }
        }}
      />
    </div>
  );
};

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

## Limit

You can limit the post results.

```jsx
<Instagram
  limit={8}
  username="instagram"
/>
```