@robust-ui/use-global-context
v1.3.0
Published
A React hook to access global context values
Downloads
49
Readme
@robust-ui/use-global-context / Exports
Robust
Robust is a system for generating React components with real-time CSS injection. It is programmed in TypeScript, providing type safety and enhanced developer experience.
Project Stats
Installation
You can install Robust using either npm or pnpm. To do this, run one of the following commands:
Using npm:
npm install @robust-ui/coreUsing pnpm:
pnpm install @robust-ui/coreusing yarn:
yarn add @robust-ui/coreAlternatively, you can also download Robust from the GitHub repository and manually install the dependencies. The prepare script defined in the package.json file will automatically build all the files within the packages folder.
Usage
To use Robust, you need to make use of the Main component from the @robust-ui/nextjs-components repository. Note that the functionality has only been tested with Next.js and may not work in other React environments.
Here's an example of how to use Robust in a Next.js application:
import { Main, Header, Text, Icon, Flex } from "@robust-ui/nextjs-components";
import { SideMenu } from "@/components/drawer";
import type { AppProps } from "next/app";
import React from "react";
export default function App({ Component, pageProps }: AppProps) {
const [open, setOpen] = React.useState(false);
return (
<Main color="white" fontFamily="Fira Code">
<Header backgroundColor="gunMetal">
<Flex>
<Text fontWeight="700" fontSize="1.5rem">
Nahuel
</Text>
</Flex>
<Icon type="menu" onClick={() => setOpen(!open)} />
</Header>
<SideMenu open={open} setOpen={setOpen} />
<Component {...pageProps} />
</Main>
);
}In the above example, we import the necessary components from Robust and use them to create a basic application structure. The Main component sets the color and font family for the components. The Header component represents the application header, including a title and a menu icon that toggles the open state. The SideMenu component displays a side drawer with links and language options. Finally, we render the Component with the pageProps.
Please note that this usage example is specific to Next.js, and the functionality may not be tested or supported in other React environments. Make sure to customize the components and their properties based on your specific requirements.
Features
Robust includes the following features:
- Automatic responsiveness: The components are designed to adapt to different screen sizes and orientations.
- Quick language switching: Easily switch between different languages using the language options provided.
- Dark mode: The system supports a dark mode theme that can be enabled or disabled.
- Global states: Robust provides mechanisms for managing global states and sharing data between components.
- Real-time CSS injection: The system injects CSS in real time, allowing for dynamic styling and theming.
- TypeScript support: Robust is programmed in TypeScript, providing type safety and enhanced developer experience.
- Customizable components: The components can be customized using various properties to suit your specific requirements.
- Easy to use: Robust is designed to be easy to use and integrate with existing React applications.
- Extensible: The system can be extended with additional components and functionality as needed.
- Well-documented: The codebase is well-documented, making it easy to understand and contribute to.
- Active development: Robust is actively developed and maintained, with regular updates and improvements.
Contributing
Contributions to Robust are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.
License
Robust is released under the MIT License.
Interfaces
@robust-ui/use-global-context / Exports / DevData
Interface: DevData
Interface representing the development data.
Table of contents
Properties
- commands
- cssReset
- currentBreakpoint
- currentGlobalLanguage
- eventLogs
- globalState
- isBrowser
- isDarkModeActive
- isProviderActive
- isServer
- mediaBreakpoints
- pathname
- selectors
- theme
Properties
commands
• commands: Record<string, string | CommandFunction>
Defined in
cssReset
• cssReset: string
Defined in
currentBreakpoint
• currentBreakpoint: unknown
Defined in
currentGlobalLanguage
• currentGlobalLanguage: "es-AR" | "es-ES" | "es-MX" | "pt-BR" | "pt-PT" | "zh-CN" | "zh-HK" | "zh-TW" | "en-GB" | "en-US" | "en" | "zh" | "ja" | "ko" | "ru" | "fr" | "de" | "pt" | "es" | "nl" | "it" | "tr" | "da" | "pl" | "cs" | "th" | "sv" | "hu" | "fi" | "vi" | "nb" | "el" | "bg" | "sk" | "he" | "ro" | "hr" | "uk" | "id" | "ms" | "hi" | "fil" | "ar" | "bn" | "fa" | "gu" | "ka" | "km" | "mr" | "mn" | "ne" | "pa" | "si" | "sw" | "ta" | "te" | "ur" | "uz" | "zu" | "lv" | "lt" | "sr" | "sl" | "et" | "is" | "ms_MY"
Defined in
eventLogs
• Optional eventLogs: EventLogEntry[]
Defined in
globalState
• globalState: Record<string, unknown>
Defined in
isBrowser
• isBrowser: false | HTMLElement
Defined in
isDarkModeActive
• isDarkModeActive: boolean
Defined in
isProviderActive
• isProviderActive: boolean
Defined in
isServer
• isServer: boolean
Defined in
mediaBreakpoints
• mediaBreakpoints: Record<string, number>
Defined in
pathname
• pathname: string
Defined in
selectors
• selectors: Record<string, unknown>
Defined in
theme
• theme: Record<string, { [key: string | number]: unknown; }>
Defined in
@robust-ui/use-global-context / Exports / DevTools
Interface: DevTools
Represents a set of developer tools for managing the application state and behavior.
Table of contents
Properties
- changeLanguage
- getAppState
- removeNotificationState
- resetAppState
- resetNotificationState
- setAppState
- setNotificationState
- toggleDarkMode
Properties
changeLanguage
• changeLanguage: (language: "es-AR" | "es-ES" | "es-MX" | "pt-BR" | "pt-PT" | "zh-CN" | "zh-HK" | "zh-TW" | "en-GB" | "en-US" | "en" | "zh" | "ja" | "ko" | "ru" | "fr" | "de" | "pt" | "es" | "nl" | "it" | "tr" | "da" | "pl" | "cs" | "th" | "sv" | "hu" | "fi" | "vi" | "nb" | "el" | "bg" | "sk" | "he" | "ro" | "hr" | "uk" | "id" | "ms" | "hi" | "fil" | "ar" | "bn" | "fa" | "gu" | "ka" | "km" | "mr" | "mn" | "ne" | "pa" | "si" | "sw" | "ta" | "te" | "ur" | "uz" | "zu" | "lv" | "lt" | "sr" | "sl" | "et" | "is" | "ms_MY") => void
Changes the language of the application.
Param
The new language to set.
Type declaration
▸ (language): void
Changes the language of the application.
Parameters
| Name | Type | Description |
| :--------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------- |
| language | "es-AR" | "es-ES" | "es-MX" | "pt-BR" | "pt-PT" | "zh-CN" | "zh-HK" | "zh-TW" | "en-GB" | "en-US" | "en" | "zh" | "ja" | "ko" | "ru" | "fr" | "de" | "pt" | "es" | "nl" | "it" | "tr" | "da" | "pl" | "cs" | "th" | "sv" | "hu" | "fi" | "vi" | "nb" | "el" | "bg" | "sk" | "he" | "ro" | "hr" | "uk" | "id" | "ms" | "hi" | "fil" | "ar" | "bn" | "fa" | "gu" | "ka" | "km" | "mr" | "mn" | "ne" | "pa" | "si" | "sw" | "ta" | "te" | "ur" | "uz" | "zu" | "lv" | "lt" | "sr" | "sl" | "et" | "is" | "ms_MY" | The new language to set. |
Returns
void
Defined in
getAppState
• getAppState: (isDev: boolean) => unknown
Retrieves the value of a specific key from the application state.
Param
Indicates whether the operation is performed in a development environment.
Type declaration
▸ (isDev): unknown
Retrieves the value of a specific key from the application state.
Parameters
| Name | Type | Description |
| :------ | :-------- | :------------------------------------------------------------------------- |
| isDev | boolean | Indicates whether the operation is performed in a development environment. |
Returns
unknown
The value associated with the specified key.
Defined in
removeNotificationState
• removeNotificationState: (notificationId: string) => void
Removes a specific notification from the notification state.
Param
The ID of the notification to remove.
Type declaration
▸ (notificationId): void
Removes a specific notification from the notification state.
Parameters
| Name | Type | Description |
| :--------------- | :------- | :------------------------------------ |
| notificationId | string | The ID of the notification to remove. |
Returns
void
Defined in
resetAppState
• resetAppState: (isDev: boolean) => void
Resets the application state.
Param
Indicates whether the operation is performed in a development environment.
Type declaration
▸ (isDev): void
Resets the application state.
Parameters
| Name | Type | Description |
| :------ | :-------- | :------------------------------------------------------------------------- |
| isDev | boolean | Indicates whether the operation is performed in a development environment. |
Returns
void
Defined in
resetNotificationState
• resetNotificationState: () => void
Resets the notification state of the application.
Type declaration
▸ (): void
Resets the notification state of the application.
Returns
void
Defined in
setAppState
• setAppState: (key: string, value: unknown, isDev: boolean) => void
Sets the value of a specific key in the application state.
Param
The key of the state value to set.
Param
The value to set for the specified key.
Param
Indicates whether the operation is performed in a development environment.
Type declaration
▸ (key, value, isDev): void
Sets the value of a specific key in the application state.
Parameters
| Name | Type | Description |
| :------ | :-------- | :------------------------------------------------------------------------- |
| key | string | The key of the state value to set. |
| value | unknown | The value to set for the specified key. |
| isDev | boolean | Indicates whether the operation is performed in a development environment. |
Returns
void
Defined in
setNotificationState
• setNotificationState: (notification: notification) => void
Sets the notification state of the application.
Param
The notification object to set.
Type declaration
▸ (notification): void
Sets the notification state of the application.
Parameters
| Name | Type | Description |
| :------------- | :------------------------------------------ | :------------------------------ |
| notification | notification | The notification object to set. |
Returns
void
Defined in
toggleDarkMode
• toggleDarkMode: (isDarkModeActive: boolean) => void
Toggles the dark mode of the application.
Param
Indicates whether the dark mode should be activated or deactivated.
Type declaration
▸ (isDarkModeActive): void
Toggles the dark mode of the application.
Parameters
| Name | Type | Description |
| :----------------- | :-------- | :------------------------------------------------------------------ |
| isDarkModeActive | boolean | Indicates whether the dark mode should be activated or deactivated. |
Returns
void
Defined in
@robust-ui/use-global-context / Exports / GlobalContextValues
Interface: GlobalContextValues
Represents the values of the global context.
Table of contents
Properties
Properties
devData
• devData: DevData
Defined in
devTools
• devTools: DevTools
Defined in
notifications
• notifications: Record<string, unknown>
Defined in
userContext
• userContext: userContext
Defined in
@robust-ui/use-global-context / Exports / ToolConfig
Interface: ToolConfig
Represents the configuration options for a tool.
Table of contents
Properties
Properties
enableFeatureX
• Optional enableFeatureX: boolean
Defined in
enableFeatureY
• Optional enableFeatureY: boolean
Defined in
language
• Optional language: string
Defined in
maxRetryAttempts
• Optional maxRetryAttempts: number
Defined in
@robust-ui/use-global-context / Exports / notification
Interface: notification
Represents a notification.
Table of contents
Properties
- altColor
- colorScheme
- colorSchemeRaw
- description
- duration
- id
- isClosable
- label
- onClose
- opacityColorScheme
- status
- variant
Properties
altColor
• Optional altColor: PartialOrNestedPartial<boolean>
Defined in
colorScheme
• Optional colorScheme: PartialOrNestedPartial<"inherit" | "transparent" | "current" | "currentColor" | "black" | "white" | "gray" | "red" | "yellow" | "green" | "blue" | "indigo" | "purple" | "pink" | "rose" | "orange" | "teal" | "cyan" | "blueGray" | "redGray" | "gunMetal" | "frenchMauve" | "dracula" | "brightPink" | "raisinBlack" | "steelPink" | "mulberry" | "whiteAlpha50" | "whiteAlpha100" | "whiteAlpha200" | "whiteAlpha300" | "whiteAlpha400" | "whiteAlpha500" | "whiteAlpha600" | "whiteAlpha700" | "whiteAlpha800" | "whiteAlpha900" | "blackAlpha50" | "blackAlpha100" | "blackAlpha200" | "blackAlpha300" | "blackAlpha400" | "blackAlpha500" | "blackAlpha600" | "blackAlpha700" | "blackAlpha800" | "blackAlpha900" | "gray50" | "gray100" | "gray200" | "gray300" | "gray400" | "gray500" | "gray600" | "gray700" | "gray800" | "gray900" | "red50" | "red100" | "red200" | "red300" | "red400" | "red500" | "red600" | "red700" | "red800" | "red900" | "blueGray50" | "blueGray100" | "blueGray200" | "blueGray300" | "blueGray400" | "blueGray500" | "blueGray600" | "blueGray700" | "blueGray800" | "blueGray900" | "yellow50" | "yellow100" | "yellow200" | "yellow300" | "yellow400" | "yellow500" | "yellow600" | "yellow700" | "yellow800" | "yellow900" | "green50" | "green100" | "green200" | "green300" | "green400" | "green500" | "green600" | "green700" | "green800" | "green900" | "teal50" | "teal100" | "teal200" | "teal300" | "teal400" | "teal500" | "teal600" | "teal700" | "teal800" | "teal900" | "blue50" | "blue100" | "blue200" | "blue300" | "blue400" | "blue500" | "blue600" | "blue700" | "blue800" | "blue900" | "indigo50" | "indigo100" | "indigo200" | "indigo300" | "indigo400" | "indigo500" | "indigo600" | "indigo700" | "indigo800" | "indigo900" | "redGray50" | "redGray100" | "redGray200" | "redGray300" | "redGray400" | "redGray500" | "redGray600" | "redGray700" | "redGray800" | "redGray900" | "purple50" | "purple100" | "purple200" | "purple300" | "purple400" | "purple500" | "purple600" | "purple700" | "purple800" | "purple900" | "orange50" | "orange100" | "orange200" | "orange300" | "orange400" | "orange500" | "orange600" | "orange700" | "orange800" | "orange900" | "pink50" | "pink100" | "pink200" | "pink300" | "pink400" | "pink500" | "pink600" | "pink700" | "pink800" | "pink900" | "mulberry50" | "mulberry100" | "mulberry200" | "mulberry300" | "mulberry400" | "mulberry500" | "mulberry600" | "mulberry700" | "mulberry800" | "mulberry900">
Defined in
colorSchemeRaw
• Optional colorSchemeRaw: PartialOrNestedPartial<string>
Defined in
description
• Optional description: PartialOrNestedPartial<string>
Defined in
duration
• Optional duration: number
Defined in
id
• Optional id: string
Defined in
isClosable
• Optional isClosable: PartialOrNestedPartial<boolean>
Defined in
label
• Optional label: PartialOrNestedPartial<string>
Defined in
onClose
• Optional onClose: PartialOrNestedPartial<() => void>
Defined in
opacityColorScheme
• Optional opacityColorScheme: PartialOrNestedPartial<number>
Defined in
status
• Optional status: PartialOrNestedPartial<"default" | "info" | "warning" | "error" | "success">
Defined in
variant
• Optional variant: PartialOrNestedPartial<"ghost" | "solid" | "outline" | "link">
Defined in
@robust-ui/use-global-context / Exports / userContext
Interface: userContext
Represents the user context.
Table of contents
Properties
Properties
getAppState
• getAppState: (isDev: boolean) => unknown
Type declaration
▸ (isDev): unknown
Parameters
| Name | Type |
| :------ | :-------- |
| isDev | boolean |
Returns
unknown
Defined in
globalState
• globalState: Record<string, unknown>
Defined in
resetAppState
• resetAppState: (isDev: boolean) => void
Type declaration
▸ (isDev): void
Parameters
| Name | Type |
| :------ | :-------- |
| isDev | boolean |
Returns
void
Defined in
setAppState
• setAppState: (key: string, value: unknown, isDev: boolean) => void
Type declaration
▸ (key, value, isDev): void
Parameters
| Name | Type |
| :------ | :-------- |
| key | string |
| value | unknown |
| isDev | boolean |
Returns
void
Defined in
@robust-ui/use-global-context / Exports
@robust-ui/use-global-context
Table of contents
Interfaces
Variables
Functions
Variables
GlobalContext
• Const GlobalContext: Context<GlobalContextValues>
The global context for the application.
Defined in
Functions
useGlobalContext
▸ useGlobalContext<T>(options?): GlobalContextValues[T]
Custom hook to access the global context values.
Type parameters
| Name | Type | Description |
| :--- | :---------------------------------------------------------------------- | :----------------------------------------------- |
| T | extends keyof GlobalContextValues | The key of the global context value to retrieve. |
Parameters
| Name | Type | Description |
| :------------ | :------- | :----------------------------------------------- |
| options? | Object | Optional configuration for the hook. |
| options.key | T | The key of the global context value to retrieve. |
Returns
- The value of the global context associated with the specified key.
Defined in
▸ useGlobalContext<T, K>(options?): GlobalContextValues[T][K]
Retrieves a value from the global context based on the provided key and subKey.
Type parameters
| Name | Type | Description |
| :--- | :---------------------------------------------------------------------- | :-------------------------------------------- |
| T | extends keyof GlobalContextValues | The type of the key in the global context. |
| K | extends string | number | symbol | The type of the subKey in the global context. |
Parameters
| Name | Type | Description |
| :--------------- | :------- | :------------------------------------ |
| options? | Object | The options for retrieving the value. |
| options.key | T | The key in the global context. |
| options.subKey | K | The subKey in the global context. |
Returns
GlobalContextValues[T][K]
The value from the global context.