Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-social-login-buttons
Advanced tools
Readme
Live demo https://codesandbox.io/s/3rpq558rv5
A simple package to display social login buttons using React.
Buttons do not provide any social logic. They are only visual components listening to some events triggered by the user.
npm
npm install --save react-social-login-buttons
yarn
yarn add react-social-login-buttons
ES6 imports:
import { FacebookLoginButton } from "react-social-login-buttons";
ES6 imports optimized (deprecated):
import FacebookLoginButton from "react-social-login-buttons/lib/buttons/FacebookLoginButton";
Default button content - "Log in with Facebook"
<FacebookLoginButton onClick={() => alert("Hello")} />
Custom button content
<FacebookLoginButton onClick={() => alert("Hello")}>
<span>Custom text</span>
</FacebookLoginButton>
We currently support just a few login buttons. Others will be implemented later.
<FacebookLoginButton onClick={() => alert("Hello")} />
<GoogleLoginButton onClick={() => alert("Hello")} />
<GithubLoginButton onClick={() => alert("Hello")} />
<TwitterLoginButton onClick={() => alert("Hello")} />
<XLoginButton onClick={() => alert("Hello")} />
<AmazonLoginButton onClick={() => alert("Hello")} />
<InstagramLoginButton onClick={() => alert("Hello")} />
<LinkedInLoginButton onClick={() => alert("Hello")} />
<MicrosoftLoginButton onClick={() => alert("Hello")} />
<BufferLoginButton onClick={() => alert("Hello")} />
<TelegramLoginButton onClick={() => alert("Hello")} />
<AppleLoginButton onClick={() => alert("Hello")} />
<DiscordLoginButton onClick={() => alert("Hello")} />
<SlackLoginButton onClick={() => alert("Hello")} />
<OktaLoginButton onClick={() => alert("Hello")} />
<YahooLoginButton onClick={() => alert("Hello")} />
<ZaloLoginButton onClick={() => alert("Hello")} />
<TikTokLoginButton onClick={() => alert("Hello")} />
<MetamaskLoginButton onClick={() => alert("Hello")} />
<GitlabLoginButton onClick={() => alert("Hello")} />
You can create your own button.
You do not have to wait for us to implement all of them.
You can also use your own icons, let's say from font-awesome.
You can also pass a component to the icon prop.
import React from "react";
import { createButton } from "react-social-login-buttons";
const config = {
text: "Log in with Facebook",
icon: "facebook",
iconFormat: (name) => `fa fa-${name}`,
style: { background: "#3b5998" },
activeStyle: { background: "#293e69" },
};
/** My Facebook login button. */
const MyFacebookLoginButton = createButton(config);
export default MyFacebookLoginButton;
Config can also look like.
const config = {
text: "Log in with Facebook",
icon: MyIconComponent,
style: { background: "#3b5998" },
activeStyle: { background: "#293e69" },
};
Props for every Button
onClick
{function} (optional)Will be triggered when clicked on the button.
style
{Object} (optional)Custom button styles
className
{String} (optional)Custom button class
children
{React.children} (optional)You can pass any children to our buttons.
activeStyle
{Object} (optional)activeStyle styles will be applied instead of style when mouse hovers above the element
icon
{String|Node} (optional)This icon will be displayed.
If you pass a string, <i className={format(name)}/>
will be rendered.
iconSize
{String} (optional)Icon will have this size. Eg. "26px"
iconColor
{String} (optional)Icon will have this color - default #FFFFFF
size
{String} (optional)Box will have this size. Eg. "150px"
iconFormat
{function} (optional)Format icon className. Eg. (name) => "fa-icon fa-icon-" + name
align
{"left" | "right" | "center"} (optional)Align the text on the button (default is left).
preventActiveStyles
{Boolean} (optional) default: falseIf set to true, activeStyles won't be used and will be used styles from the style prop.
disabled
{Boolean} (optional)Disables (or enables the button)
onClick
onMouseEnter
onMouseLeave
react-social-login-buttons is focused on speed and simplicity.
I welcome issues and pull requests on https://github.com/michaeljscript/react-social-login-buttons
Special thanks to people creating awesome svg icons and teams
FAQs
Simple social login buttons for React
The npm package react-social-login-buttons receives a total of 9,644 weekly downloads. As such, react-social-login-buttons popularity was classified as popular.
We found that react-social-login-buttons demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.