@ base316/ 反应
滴入反应组件用于 基础316 - 注册,注册, 配置、定价和计费,在自己的应用程序中进行而不是 您的用户会被发送到一个页面.
npm install @base316/react @base316/sdk
一次包装你的应用
import { Base316Provider } from "@base316/react";
export default function App({ children }) {
return (
<Base316Provider publishableKey={process.env.NEXT_PUBLIC_BASE316_KEY}>
{children}
</Base316Provider>
);
}
提供者持有一个客户端和签名用户会话,并获取 在Base316仪表板上布置的品牌——所以你设定的是 这些组件看起来像这里。 无相相相相相相相相相相相相相相相相相相相相相相相.
在自己的页面上签名
import { SignIn } from "@base316/react";
export default function LoginPage() {
return <SignIn onSignedIn={() => router.push("/app")} />;
}
这就是整体整合。 没有方向,没有弹出,没有发送的按钮 某人到另一个领域,然后回来。 双因子提示在 当账户注册时.
如果你不想让用户签名, Base316 也主持这些页面: 在仪表盘的链接上指向您的用户,然后他们回来签到.
剩下的钱
import {
UserProfile, // email, password, sessions, two-factor
PricingTable, // your plans, with a checkout button
SubscriptionManager, // what they are on, and how to change it
Invoices, // what they have been billed
Branding, // your logo and name, as configured
} from "@base316/react";
样式
三种方式,从最少到大多数入侵。 使用第一个有效.
1. 仪表板. 无论你放什么 登录页面 - 品牌颜色, 背景、标志——自动到达.
2. 联合国. appearance 标志. 无 CSS 写入 :
<Base316Provider
publishableKey={key}
appearance={{ colorPrimary: "#16a34a", borderRadius: "999px" }}
>
3. 自己的CSS系统,目标 b316-* 类别名称,或 a className 在任意
组件,将您的工具类交给它.
每个颜色、半径和字体都位于 --b316-* 定制属性。 没什么
自动继承您的应用程序的样式——默默吸收任意
body { font } 财务报告和审定财务报表 button { } 规则恰好存在 生成组件
以双方无法预测的方式破解.
租户的白标签
当一个企业为别人经营你的产品时——一家公司及其客户——显示 公司在屏幕上的品牌让客户看到:
<Base316Provider publishableKey={key} tenant={{ organizationExternalId: firm.id }}>
租户自己的品牌,然后是父母的, 然后是你的环境,田地
按领域。 变动 tenant 当人员切换团队和每个组件时
复作作诸相. TeamMembers 说,当一个团队通过公司联系到
而不是会员.
阅读会议
import { useSession } from "@base316/react";
function Greeting() {
const { session, loading } = useSession();
if (loading) return null;
return session ? <p>Hello {session.user.email}</p> : <a href="/login">Sign in</a>;
}
loading 事项:先实现已签出分支,然后进行互换
每个页面都会在已经签名的人身上显示一个登录链接.