Composants

Notification preferences

What reaches a person: categories down, channels across, a switch at each crossing, presets that set it all at once, a locked row for what cannot be turned off (security).

Web · ✓Mobile · ✗ à construireBureau · ✓BêtaFormulaires

import { NotificationPreferences } from "@krizaka/ui/notification-preferences";

In the app only, nothing by e-mail.

	In the app	By e-mail
Followers and repliesSomeone follows you or answers.
MessagesA new message in a conversation.
EarningsA sale, a tip, a payout.
SecurityAlways on: sign-ins and password changes.

Web uniquement — React, depuis @krizaka/ui/notification-preferences. Bêta : son API peut encore changer à une version mineure.

Mobile · ✗ à construire. On a phone one switch per category in a SettingsGroup already does the job (a notifications screen); the matrix is a computer's idea. issue #275

Pourquoi il est là. Akinaza's and Yomizaka's account baseline (notifications) (krizaka-ui#515).

Quand l’utiliser

The notifications part of an account page, where the product sends in the app and by e-mail.
Any choice of several kinds of message over several channels.

Quand ne pas l’utiliser

One kind of message, one channel.À la place : Switch
A single setting with a label and help.À la place : Settings layout

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { NotificationPreferences } from "@krizaka/ui/notification-preferences";

Exemples

Categories and channels

Four categories over the app and e-mail, three presets, security locked on.

In the app only, nothing by e-mail.

	In the app	By e-mail
Followers and repliesSomeone follows you or answers.
MessagesA new message in a conversation.
EarningsA sale, a tip, a payout.
SecurityAlways on: sign-ins and password changes.

Props

Prop	Type	Défaut	Description
`categories`requis	`readonly NotificationCategory[]`	—	The rows: what can be sent.
`channels`requis	`readonly NotificationChannel[]`	—	The columns: where a notification can go.
`label`requis	`string`	—	The group's accessible name (`Notification settings`).
`onValueChange`requis	`(next: NotificationMatrix) => void`	—	Called with the whole matrix after a switch or a preset — normalised: locked rows on, inert channels unchanged, unused crossings absent.
`value`requis	`NotificationMatrix`	—	What is on, by category then channel (controlled).
`className`	`string`	—	Classes merged on the root.
`customHint`	`string`	—	Said under the presets when the matrix matches none (`Custom`).
`presets`	`readonly NotificationPreset[]`	—	Quick settings above the matrix (`Everything`, `Essentials`, `Nothing`).
`presetsLabel`	`string`	—	The presets' own accessible name (`Presets`). Required with `presets`.

Accessibilité

A real table: channels are column headers, categories are row headers.
Each switch is named « Category — Channel ».

Clavier

Touches	Action
`Tab, Space`	Each switch is a stop; the presets are a group with arrow keys.

Bonnes pratiques

Keep the value as plain data and save at once, as SettingsSection does.
Offer presets: most people want « everything » or « essentials », not twelve switches.
Show the security row locked on, with the reason, instead of hiding it.
Disable a whole channel (disabled) when it is off for the account, and say why next to the table.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Kind config editor

OTP input

Sur cette page

Quand l’utiliser Installation Exemples Props Accessibilité Bonnes pratiques Composants liés