Simplify Facebook Login in React with react-fb-login-btn

Hello everyone,

I want to share with you a new React component called react-fb-login-btn. It helps you add Facebook login to your React applications easily.

Introduction

Adding Facebook login to your app can be hard sometimes. With react-fb-login-btn, you can do it in a simple way. This component is built with TypeScript and Tailwind CSS. It allows you to customize the button to fit your app's design.

Why Use react-fb-login-btn?

• Easy to Use: You don't need to deal with the Facebook SDK directly.
• Customizable: Change the button's look to match your app.
• TypeScript Support: It uses TypeScript for better code quality.
• Handles Events: Easy to handle login success or failure.
• Supports RTL: Works with languages that are right-to-left.

Installation

You can install it using npm:

npm install react-fb-login-btn

Or with yarn:

yarn add react-fb-login-btn

Basic Usage

First, import the component into your project:

import React from 'react';
import { FacebookLoginButton } from 'react-fb-login-btn';

const App = () => {
  const handleSuccess = (response) => {
    console.log('Login successful:', response);
    // Handle successful login here
  };

  const handleFailure = (error) => {
    console.error('Login failed:', error);
    // Handle login failure here
  };

  return (
    <div>
      <FacebookLoginButton
        appId="YOUR_FACEBOOK_APP_ID"
        onSuccess={handleSuccess}
        onFail={handleFailure}
      />
    </div>
  );
};

export default App;

Note: Replace "YOUR_FACEBOOK_APP_ID" with your actual Facebook App ID. You can get it from the Facebook Developers website.

Customization Options

The FacebookLoginButton has several props to customize it:

• appId (string, required): Your Facebook App ID.
• onSuccess (function): Called when login is successful.
• onFail (function): Called when login fails.
• shape (string): 'rectangular' or 'circle'. Default is 'rectangular'.
• theme (string): 'blue', 'dark', 'light', or 'custom'. Default is 'blue'.
• text (string): The text on the button. Default is 'Login with Facebook'.
• scope (string): Permissions you want to request. Default is 'public_profile,email'.

More Examples

To see more examples and how to customize the button, please visit our Storybook documentation.

I hope you find it useful!

Feedback and Contributions

If you have any questions or suggestions, please visit the GitHub repository. Contributions are welcome!

Thank you for reading!