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 with a instagram graph api connected.

Installation

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

# .env file
NEXT_PUBLIC_IG_ACCESS_TOKEN=...
NEXT_PUBLIC_IG_BUSINESS_ID=...

REACT APP

# .env file
REACT_APP_IG_ACCESS_TOKEN=...
REACT_APP_IG_BUSINESS_ID=...

Example usage

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: #F5F5F5display: 'flex'alignItems: 'center'maxWidth: '300px'justifyContent: 'space-evenly'padding: '10px'borderRadius: '20px'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)`transform: 'scale(0)'transition: 'background .25s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 0s linear .25s'position: 'absolute'width: '100%'height: '100%'top: 0borderRadius: '20px'fontFamily: 'Poppins'content: { color: 'white', position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%), infoRows: { display: 'flex', alignItems: 'center', gap: '0.3rem' }}

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.

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

Client Component

Client-side rendering is still available from the react-instagram-data package.