Notion UIUse Workspace Settings
A React hook for integrating workspace settings into Notion's Settings Panel.
Installation
Supported Features
- Update/delete/leave workspace
- Members & scopes management
- Teamspaces management
Usage
Settings Panel
You can see Notion Clone for a full example.
function Settings() {
const [tab, setTab] = useState<TabType>("account");
const { accountStore, actions: accountActions } = useAccountSettings();
const { workspaceStore, actions: workspaceActions } = useWorkspaceSettings();
const settings = useMemo<SettingsStore>(
() => ({
account: accountStore,
workspace: workspaceStore,
}),
[accountStore, workspaceStore],
);
return (
<SettingsProvider
settings={settings}
{...accountActions}
{...workspaceActions}
>
<SettingsPanel>
<SettingsSidebar>
<SettingsSidebarPreset tab={tab} onTabChange={setTab} />
</SettingsSidebar>
<SettingsContent>
<SettingsBodyPreset tab={tab} onTabChange={setTab} />
</SettingsContent>
</SettingsPanel>
</SettingsProvider>
);
}API Reference
useAccountSettings
Note
It should be used within the <AuthProvider> context.
It returns an object with the following properties:
| Property | Type | Description |
|---|---|---|
workspaceStore | WorkspaceStore | The workspace store instance. |
actions | Partial<SettingsProviderProps> | Workspace settings actions: workspace, people, invitations, teamspaces |
See schema definitions for: