Project @pistonite/celera
Type Aliases§
- ColorScheme
Value for the
color-schemeCSS property- LoadLanguageFn
Type alias for a function that loads language files
- ResizeLayoutProps
- TranslatorFn
i18next translator function
Variables§
- celeraLogger
The logger. Can be used to modify log levels for Celera
- GALE_BUILTIN_STYLES
Built-in styles for gale
- i18next
The i18next instance
Functions§
- addDarkSubscriber
Add a subscriber to dark mode changes and return a function to remove the subscriber
- addDisplayModeSubscriber
Subscribe to display mode changes
- addLocaleSubscriber
Add a subscriber to be notified when the locale changes. Returns a function to remove the subscriber
- clearPersistedDarkPerference
Clears the persisted dark mode preference
- clearPersistedLocalePreference
Clear the locale preference previously presisted to localStorage
- convertToSupportedLocale
Convert a locale/language to a supported locale/language
- convertToSupportedLocaleIn
- convertToSupportedLocaleOrDefault
Convert a locale/language to a supported locale/language, or return the default locale if not found.
- gale
Tailwind-like style engine, but uses
griffel- getDefaultLocale
Get the default locale when initialized
- getDisplayMode
Get the current display mode
- getLocale
Get the current selected locale
- getLocalizedLanguageName
Get the localized name of a language using
Intl.DisplayNames.- getPreferredLocale
Use browser API to guess user's preferred locale
- getSupportedLocales
Get the array of supported locales passed to init
- initDark
Initialize the dark mode global state
- initDisplayMode
Initialize display mode detection for the app.
- initLocale
Initialize locale system in Pure and connect it with I18next
- injectStyle
Inject a css string into a style tag identified by the id
- isDark
Gets the current value of dark mode
- isMobile
Check if the current UserAgent is a mobile device
- prefersDarkMode
Returns if dark mode is prefered in the browser environment
- setDark
Set the value of dark mode
- setLocale
Set the selected locale
- translate
The i18next.t translation function
- useDark
React hook to get the current dark mode state
- useDisplayMode
Hook to get the display mode
- useLocale
React hook to get the current locale
- useSwappedWheelScrollDirection
React hoook to make it so that by default, mouse wheel scrolls horizontally, and Shift + mouse wheel scrolls vertically
- useTranslation
React hook to get translation function for a namespace
Classes§
- DarkToggle
React component to toggle the dark mode. See DarkToggleProps
- GitHubLink
React component. Button with GitHub icon that links to the GitHub repository. See GitHubLinkProps
- InlineLink
React component. A link wrapper that applies inline style and prevent the lint to be split up across multiple lines. See Fluent UI Docs
- LanguagePicker
React component for a language picker button or menu
- MenuSwitch
React component. A menu item with a label adn a switch. See MenuSwitchProps
- ResizeLayout
React component. A flex-box layout of 2 children, with a draggable divider between them. See ResizeLayoutOwnProps
- ThemeProvider
React component to provide Fluent UI theme to the app
Interfaces§
- DarkOptions
Option for initializing dark mode. See initDark
- DarkToggleProps
React component to toggle the dark mode
- DisplayModeOptions
Options for display mode detection. See initDisplayMode
- GitHubLinkProps
React component. Button with GitHub icon that links to the GitHub repository.
- LocaleOptions
Option for initializing locale with i18next integration
- MenuSwitchProps
React component. A menu item with a label and a switch
- ResizeLayoutOwnProps
React component. A flex-box layout of 2 children, with a draggable divider between them.