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

Installation

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

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

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

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.

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