npm package: @salvagr/react-instagram-data-server
Description: Easy way to get a beautiful media grid from any business instagram account. This version is adapted to be able to render the component on the server (New next.js 13, React server component, etc..).
Author: salvaoo
Latest version: 1.0.0

# React Instagram Data (Server-side Rendering)

Easy way to get a beautiful media grid from any business instagram account. This version is adapted to be able to render the component on the server (New next.js 13, React server component, etc..).

> 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-server
# OR
yarn add @salvagr/react-instagram-data-server
```

I use the `env` file to setup the functionality. Please follow the next step depending on your project.

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-server';

export default function App() {
  return (
    <div>
      <Instagram
        username="instagram"
      />
    </div>
  );
};
```

## 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-server';

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

## Limit

You can limit the post results.

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

## *Client Component*
> Client-side rendering is still available from the [react-instagram-data](https://www.npmjs.com/package/@salvagr/react-instagram-data) package.