React 社交登录按钮

在线演示 https://codesandbox.io/s/3rpq558rv5

一个简单的包，用于使用 React 显示社交登录按钮。

按钮不提供任何社交逻辑。 它们只是监听用户触发的某些事件的视觉组件。

安装

npm

npm install --save react-social-login-buttons

yarn

yarn add react-social-login-buttons

导入

ES6 导入：

import { FacebookLoginButton } from "react-social-login-buttons";

ES6 优化导入（已弃用）：

import FacebookLoginButton from "react-social-login-buttons/lib/buttons/FacebookLoginButton";

使用

默认按钮内容 - "使用 Facebook 登录"

<FacebookLoginButton onClick={() => alert("你好")} />

自定义按钮内容

<FacebookLoginButton onClick={() => alert("你好")}>
  <span>自定义文本</span>
</FacebookLoginButton>

社交按钮类型

我们目前只支持少数登录按钮。其他按钮将在以后实现。

FacebookLoginButton

<FacebookLoginButton onClick={() => alert("你好")} />

GoogleLoginButton

<GoogleLoginButton onClick={() => alert("你好")} />

GithubLoginButton

<GithubLoginButton onClick={() => alert("你好")} />

TwitterLoginButton

<TwitterLoginButton onClick={() => alert("你好")} />

XLoginButton

<XLoginButton onClick={() => alert("你好")} />

AmazonLoginButton

<AmazonLoginButton onClick={() => alert("你好")} />

InstagramLoginButton

<InstagramLoginButton onClick={() => alert("你好")} />

LinkedInLoginButton

<LinkedInLoginButton onClick={() => alert("你好")} />

MicrosoftLoginButton

<MicrosoftLoginButton onClick={() => alert("你好")} />

BufferLoginButton

<BufferLoginButton onClick={() => alert("你好")} />

TelegramLoginButton

<TelegramLoginButton onClick={() => alert("你好")} />

AppleLoginButton

<AppleLoginButton onClick={() => alert("你好")} />

DiscordLoginButton

<DiscordLoginButton onClick={() => alert("你好")} />

SlackLoginButton

<SlackLoginButton onClick={() => alert("你好")} />

OktaLoginButton

<OktaLoginButton onClick={() => alert("你好")} />

YahooLoginButton

<YahooLoginButton onClick={() => alert("你好")} />

ZaloLoginButton

<ZaloLoginButton onClick={() => alert("你好")} />

TikTokLoginButton

<TikTokLoginButton onClick={() => alert("你好")} />

MetamaskLoginButton

<MetamaskLoginButton onClick={() => alert("你好")} />

GitlabLoginButton

<GitlabLoginButton onClick={() => alert("你好")} />

创建自己的按钮

你可以创建自己的按钮。

你不必等待我们实现所有按钮。

你也可以使用自己的图标，比如来自 font-awesome 的图标。

你还可以将组件传递给 icon 属性。

import React from "react";
import { createButton } from "react-social-login-buttons";

const config = {
  text: "使用 Facebook 登录",
  icon: "facebook",
  iconFormat: (name) => `fa fa-${name}`,
  style: { background: "#3b5998" },
  activeStyle: { background: "#293e69" },
};
/** 我的 Facebook 登录按钮。 */
const MyFacebookLoginButton = createButton(config);

export default MyFacebookLoginButton;

配置也可以像这样：

const config = {
  text: "使用 Facebook 登录",
  icon: MyIconComponent,
  style: { background: "#3b5998" },
  activeStyle: { background: "#293e69" },
};

属性

每个按钮的属性

onClick {function}（可选）

点击按钮时触发。

style {Object}（可选）

自定义按钮样式

className {String}（可选）

自定义按钮类

children {React.children}（可选）

你可以向我们的按钮传递任何子元素。

activeStyle {Object}（可选）

当鼠标悬停在元素上时，将应用 activeStyle 样式而不是 style

icon {String|Node}（可选）

将显示此图标。

如果传递字符串，将渲染 <i className={format(name)}/>。

iconSize {String}（可选）

图标将具有此大小。例如 "26px"

iconColor {String}（可选）

图标将具有此颜色 - 默认为 #FFFFFF

size {String}（可选）

盒子将具有此大小。例如 "150px"

iconFormat {function}（可选）

格式化图标类名。例如 (name) => "fa-icon fa-icon-" + name

align {"left" | "right" | "center"}（可选）

对齐按钮上的文本（默认为左对齐）。

preventActiveStyles {Boolean}（可选）默认值：false

如果设置为 true，将不使用 activeStyles，而使用 style 属性中的样式。

disabled {Boolean}（可选）

禁用（或启用）按钮

事件

• onClick
• onMouseEnter
• onMouseLeave

为什么选择 react-social-login-buttons？

react-social-login-buttons 专注于速度和简单性。

贡献

我欢迎在 https://github.com/michaeljscript/react-social-login-buttons 上提出问题和拉取请求

致谢

特别感谢创建精美 svg 图标的人们和团队

• Dinirio

• SimpleIcon

• Simple Icons

• iconmonstr

• freepik

• Icomoon

• icons8