React 快速开始

npm install @nebutra/sdk @nebutra/react

import { NebutraProvider } from "@nebutra/react";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <NebutraProvider orgId={import.meta.env.VITE_NEBUTRA_ORG_ID}>
      <App />
    </NebutraProvider>
  </StrictMode>
);

import { useNebutraUser, useNebutraOrg } from "@nebutra/react";

export function UserMenu() {
  const { user, isLoaded, isSignedIn } = useNebutraUser();
  const { org } = useNebutraOrg();

  if (!isLoaded) return <Skeleton />;
  if (!isSignedIn) return <SignInButton />;

  return <p>{user.fullName} · {org.name} · {org.plan}</p>;
}

import { Can } from "@nebutra/react";

export function DeleteButton({ projectId }: { projectId: string }) {
  return (
    <Can action="delete" resource="Project">
      <button onClick={() => handleDelete(projectId)}>删除项目</button>
    </Can>
  );
}

import { useNebutraUser } from "@nebutra/react";
import { Navigate } from "react-router-dom";

export function ProtectedRoute({ children }: { children: React.ReactNode }) {
  const { isLoaded, isSignedIn } = useNebutraUser();

  if (!isLoaded) return <LoadingSpinner />;
  if (!isSignedIn) return <Navigate to="/sign-in" />;

  return <>{children}</>;
}