anthonyjgrove / React Instagram Login
Licence: mit
A React Component for Instagram Login
Stars: ✭ 48
Programming Languages
javascript
184084 projects - #8 most used programming language
React Instagram Login
An Instagram oAUth Sign-in / Log-in Component for React
Install
npm install react-instagram-login
How to use
import React from 'react';
import ReactDOM from 'react-dom';
import InstagramLogin from 'react-instagram-login';
const responseInstagram = (response) => {
console.log(response);
}
ReactDOM.render(
<InstagramLogin
clientId="5fd2f11482844c5eba963747a5f34556"
buttonText="Login"
onSuccess={responseInstagram}
onFailure={responseInstagram}
/>,
document.getElementById('instagramButton')
);
onSuccess callback
Callback will return a code for use on your server to get a full access_token.
If implicitAuth
is set to true
it will return the full access_token directly.
onFailure callback
Callback will return an error object.
property name | value |
---|---|
error | string |
error_reason | string |
error_description | string |
Parameters
params | value | default value |
---|---|---|
clientId | string | REQUIRED |
scope | string | basic |
onSuccess | function | REQUIRED |
onFailure | function | REQUIRED |
buttonText | string | Login with Instagram |
cssClass | string | - |
tag | string | button |
type | string | button |
implicitAuth | boolean | false |
Instagram API Docs: https://www.instagram.com/developer/
You can now also pass child components such as icons into the button component.
<InstagramLogin
clientId="5fd2f11482844c5eba963747a5f34556"
onSuccess={responseInstagram}
onFailure={responseInstagram}
>
<FontAwesome
name="instagram"
/>
<span> Login with Instagram</span>
</InstagramLogin>
Dev Server
npm run start
Run Tests
npm run test:watch
Production Bundle
npm run bundle
React Google Login
Checkout my other login:React Facebook Login
Checkout keppelen's:@anthonyjgrove
Follow me on Twitter:Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].