Socket
Socket
Sign inDemoInstall

@tusken-s/facebook-tools

Package Overview
Dependencies
179
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@tusken-s/facebook-tools


Version published
Maintainers
1
Install size
13.0 MB
Created

Changelog

Source

[0.0.26] - 2023-06-19

Added

  • README.md, CONTRIBUTING.md & CODE_OF_CONDUCT.md docs.
  • GitHub actions CI/DC workflow.

Readme

Source

Facebook Tools

npm type definitions

The tool set is a comprehensive TypeScript and React-based client-side module that provides first-class functionality for adding Social Plugins and Facebook Login to your web application.

This module allows seamless integration of Facebook features into your React components. The following example demonstrates the usage of the components provided by Nom:

Installation

To install the tool set, use the following command:

npm install @tusken-s/facebook-tools
# OR
yarn add @tusken-s/facebook-tools

Usage

Import the required components from the Nom module as shown below:

import { Script, Chat, Button } from "@tusken-s/facebook-tools";

Script Component

The Script component enables you to load the necessary Facebook scripts and initialize the Social Plugins. Here is an example of how to use it:

import { Features, Script } from "@tusken-s/facebook-tools";
...
<Script
  cookie={false}
  nonce="xxxxxxx"
  features={[Features.LOGIN_BUTTON, Features.CHAT_PLUGIN]}
  appId={facebook_app_id}
  pageId={facebook_page_id}
/>

Make sure to replace your_theme_color, facebook_app_id and facebook_page_id with the actual values from your application's configuration.

Script Component Props

PropTypeDescription
appIdstringThe Facebook app ID.
pageIdstringThe Facebook page ID.
cookiebooleanSpecifies whether the cookie should be used. Default: false.
noncestringThe nonce value for script security.
languageISOLangCountryThe language for the script.
featuresArray<Features>An array of Facebook features to enable.

Chat Component

The Chat component allows you to embed a Facebook Chat Plugin into your application. Here is an example of how to use it:

<Chat minimized={true} color={your_theme_color} pageId={facebook_page_id} />

Ensure to replace facebook_page_id with the appropriate Facebook page ID from your application's configuration. Additionally, you can customize the minimized and color props to fit your specific requirements.

Chat Component Props

PropTypeDescription
pageIdstringThe Facebook page ID.
colorstringThe color of the chat plugin.
minimizedbooleanSpecifies whether the chat plugin is minimized.

Login Button Component

The Button component provides an easy way to integrate Facebook Login into your application. Here is an example of how to use it:

import { Button } from "@tusken-s/facebook-tools";

<Button
  scope="public_profile,email"
  callback={loginFacebookCallback}
  width="100%"
>
  ...
</Button>;

Replace loginFacebookCallback with the function that will handle the Facebook login callback in your application. Customize the scope and width props as needed.

Button Component Props

PropTypeDescription
disabledbooleanSpecifies whether the button is disabled. Default: false.
widthstring | numberThe width of the button.
scopestringThe Facebook login permissions scope.
buttonType"continue_with" | "login_with"The type of the button.
callback(x: StatusResponse["authResponse"]) => voidThe callback function triggered on successful login.
styleCSSPropertiesCustom styles to be applied to the button.
languageISOLangCountryThe language for the button.
childrenReactNodeThe content to be displayed inside the button.

Facebook SDK Type Definitions

In addition to the React components and functionality mentioned above, this module also offers comprehensive type definitions for Facebook's SDK native methods, classes, and tools. By simply installing the module, you gain access to the full range of Facebook SDK features with TypeScript support.

For example, you can use the Facebook SDK methods and classes as follows:

// Access Facebook SDK methods and classes
window.FB.init({
  appId: "your_app_id",
  version: "v12.0",
});

window.FB.api("/me", (response) => {
  console.log(response);
});

and you won't get any type errors.

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvement, please open an issue or submit a pull request on the GitHub repository.

Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to MUI.

Notice that contributions go far beyond pull requests and commits. Although we love giving you the opportunity to put your stamp on the module, we also are thrilled to receive a variety of other contributions.

Changelog

The changelog is regularly updated to reflect what's changed in each new release.

Roadmap

Future plans and high-priority features and enhancements can be found soon in our roadmap page.

License

This project is licensed under the terms of the MIT license.

Sponsoring services

Our Sponsors push our Research, Development & Infrastructure:

Tuskens

Tuskens allow us to host the Git repository and coordinate contributions.

Keywords

FAQs

Last updated on 19 Jun 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc