@qoretechnologies/reqore 0.32.0 → 0.32.2

package/src/components/Icon/index.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef, memo, useContext } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { IconContext } from 'react-icons';
 import { IconBaseProps, IconType } from 'react-icons/lib';
 import * as RemixIcons from 'react-icons/ri';
 import styled, { css, keyframes } from 'styled-components';
-import { ReqoreThemeContext } from '../..';
+import { useReqoreTheme } from '../..';
 import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { getColorFromMaybeString } from '../../helpers/colors';
 import { isStringSize } from '../../helpers/utils';
@@ -97,7 +97,8 @@ const ReqoreIcon = memo(
       ref
     ) => {
       const { targetRef } = useCombinedRefs(ref);
-      const theme = useContext(ReqoreThemeContext);
+      const [iconRef, setIconRef] = React.useState<HTMLSpanElement>(undefined);
+      const theme = useReqoreTheme();
       const Icon: IconType = RemixIcons[`Ri${icon}`];
       const finalColor: string | undefined = intent
         ? theme.intents[intent]
@@ -109,7 +110,7 @@ const ReqoreIcon = memo(
           : wrapperSize
         : finalSize;
 
-      useTooltip(targetRef.current, tooltip);
+      useTooltip(iconRef, tooltip);
 
       if (image) {
         return (
@@ -145,7 +146,10 @@ const ReqoreIcon = memo(
         <StyledIconWrapper
           {...rest}
           as={wrapperElement}
-          ref={targetRef}
+          ref={(ref) => {
+            targetRef.current = ref;
+            setIconRef(ref);
+          }}
           margin={margin}
           size={size}
           style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}

package/src/components/Input/index.tsx

@@ -1,5 +1,5 @@
 import { rgba } from 'polished';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
   PADDING_FROM_SIZE,
@@ -188,15 +188,11 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
-    const inputRef = useRef<HTMLInputElement>(null);
+    const [inputRef, setInputRef] = useState<HTMLInputElement>(null);
     const theme = useReqoreTheme('main', customTheme, intent);
 
-    useTooltip(targetRef.current, tooltip);
-    useAutoFocus(
-      inputRef.current,
-      readOnly || rest.disabled ? undefined : focusRules,
-      rest.onChange
-    );
+    useTooltip(inputRef, tooltip);
+    useAutoFocus(inputRef, readOnly || rest.disabled ? undefined : focusRules, rest.onChange);
 
     return (
       <StyledInputWrapper
@@ -227,7 +223,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
           }}
           onChange={!readOnly && !rest?.disabled ? rest?.onChange : undefined}
           as='input'
-          ref={inputRef}
+          ref={(ref) => setInputRef(ref)}
           theme={theme}
           _size={size}
           minimal={minimal}

package/src/components/InternalPopover/index.tsx

@@ -1,9 +1,10 @@
 import { cloneDeep, isString } from 'lodash';
 import { rgba } from 'polished';
-import React, { memo, MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import styled, { css } from 'styled-components';
+import { useContext } from 'use-context-selector';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { IPopoverData } from '../../containers/PopoverProvider';

package/src/components/Menu/item.tsx

@@ -1,9 +1,8 @@
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef } from 'react';
+import { useContext } from 'use-context-selector';
 import { ReqoreButton, ReqoreControlGroup } from '../..';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import PopoverContext from '../../context/PopoverContext';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useTooltip } from '../../hooks/useTooltip';
 import { IReqoreComponent } from '../../types/global';
 import { IReqoreButtonProps } from '../Button';
 
@@ -33,7 +32,7 @@ export interface IReqoreMenuItemRightIconStyle {
   intent?: TReqoreIntent;
 }
 
-const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
+const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
   (
     {
       children,
@@ -53,10 +52,9 @@ const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
       flat = true,
       ...rest
     }: IReqoreMenuItemProps,
-    ref: any
+    ref
   ) => {
     const { removePopover } = useContext(PopoverContext);
-    const { targetRef } = useCombinedRefs(ref);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       event.persist();
@@ -81,8 +79,6 @@ const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
       }
     };
 
-    useTooltip(targetRef.current, tooltip);
-
     return (
       <ReqoreControlGroup stack={!!onRightIconClick} fluid>
         <ReqoreButton
@@ -94,11 +90,12 @@ const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
           fluid
           onClick={handleClick}
           active={selected}
-          ref={targetRef}
+          ref={ref}
           disabled={disabled}
           intent={intent}
           icon={icon}
           rightIcon={onRightIconClick ? undefined : rightIcon}
+          tooltip={tooltip}
         >
           {label || children}
         </ReqoreButton>

package/src/components/Message/index.tsx

@@ -87,8 +87,9 @@ const ReqoreMessage = memo(
       const [internalTimeout, setInternalTimeout] = useState<NodeJS.Timeout | null>(null);
       const theme = useReqoreTheme('main', customTheme, intent);
       const { targetRef } = useCombinedRefs(ref);
+      const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
-      useTooltip(targetRef.current, tooltip);
+      useTooltip(itemRef, tooltip);
 
       useMount(() => {
         if (duration) {
@@ -142,7 +143,10 @@ const ReqoreMessage = memo(
             fluid={fluid}
             fixed={fixed}
             className={`${rest?.className || ''} reqore-message`}
-            ref={targetRef}
+            ref={(ref) => {
+              targetRef.current = ref;
+              setItemRef(ref);
+            }}
             size={size}
             theme={theme}
           >

package/src/components/Panel/index.tsx

@@ -21,7 +21,7 @@ import {
 } from '../../helpers/colors';
 import { getOneHigherSize, isActionShown } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useReqore } from '../../hooks/useReqore';
+import { useReqoreProperty } from '../../hooks/useReqoreContext';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import { ACTIVE_ICON_SCALE, INACTIVE_ICON_SCALE } from '../../styles';
@@ -102,6 +102,7 @@ export interface IReqorePanelProps
   transparent?: boolean;
   iconColor?: TReqoreEffectColor;
   responsiveActions?: boolean;
+  responsiveTitle?: boolean;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -187,7 +188,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
 
 export const StyledPanelTitle = styled.div<IStyledPanel>`
   display: flex;
-  flex-flow: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
+  flex-flow: ${({ responsive, isMobile }) => (responsive ? (isMobile ? 'column' : 'row') : 'row')};
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
@@ -295,6 +296,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       iconProps = {},
       fluid,
       responsiveActions = true,
+      responsiveTitle = true,
       size: panelSize = 'normal',
       ...rest
     }: IReqorePanelProps,
@@ -308,10 +310,11 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           ? { main: Object.values(contentEffect.gradient.colors)[0] as TReqoreEffectColor }
           : undefined)
     );
-    const { isMobile } = useReqore();
+    const isMobile = useReqoreProperty('isMobile');
     const { targetRef } = useCombinedRefs(ref);
+    const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
-    useTooltip(targetRef.current, tooltip);
+    useTooltip(itemRef, tooltip);
 
     useUpdateEffect(() => {
       setIsCollapsed(!!isCollapsed);
@@ -421,8 +424,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               stack
               customTheme={rest.customTheme || theme}
               size={rest.size}
-              fixed={rest.fixed ? true : false}
-              fluid={rest.fluid ? true : false}
+              fixed={rest.fixed}
+              fluid={rest.fluid}
               key={index}
             >
               {group.map((action, index) => renderActions(action, index, true))}
@@ -517,7 +520,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       <StyledPanel
         {...rest}
         as={rest.as || 'div'}
-        ref={targetRef}
+        ref={(ref) => {
+          targetRef.current = ref;
+          setItemRef(ref);
+        }}
         isCollapsed={_isCollapsed}
         rounded={rounded}
         flat={flat}
@@ -540,6 +546,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             size={contentSize || panelSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
+            responsive={responsiveTitle}
             isMobile={isMobile}
           >
             {hasTitleHeader && (

package/src/components/Sidebar/item.tsx

@@ -1,11 +1,9 @@
 import classnames from 'classnames';
 import map from 'lodash/map';
-import { useContext } from 'react';
 import { useMount } from 'react-use';
 import { IQorusSidebarItem } from '.';
-import { ReqorePopover } from '../..';
+import { ReqorePopover, useReqoreTheme } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
-import ThemeContext from '../../context/ThemeContext';
 import { getMainColor, getReadableColor } from '../../helpers/colors';
 import { isActiveMulti } from '../../helpers/sidebar';
 import ReqoreIcon from '../Icon';
@@ -202,7 +200,7 @@ const SidebarItemWrapper = ({
   useNativeTitle,
   onClick,
 }: SidebarItemProps) => {
-  const theme: IReqoreTheme = useContext(ThemeContext);
+  const theme: IReqoreTheme = useReqoreTheme();
 
   useMount(() => {
     if (

package/src/components/Tag/index.tsx

@@ -1,8 +1,8 @@
 import _size from 'lodash/size';
 import { rgba } from 'polished';
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { ReqorePopover } from '../..';
+import { ReqorePopover, useReqoreTheme } from '../..';
 import {
   BADGE_SIZE_TO_PX,
   PADDING_FROM_SIZE,
@@ -12,7 +12,6 @@ import {
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import ThemeContext from '../../context/ThemeContext';
 import {
   changeLightness,
   getColorFromMaybeString,
@@ -264,9 +263,10 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
-    const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+    const theme: IReqoreTheme = useReqoreTheme();
+    const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
-    useTooltip(targetRef.current, tooltip);
+    useTooltip(itemRef, tooltip);
 
     // If color or intent was specified, set the color
     const getCustomColor = (itemIntent?: TReqoreIntent): TReqoreHexColor => {
@@ -292,7 +292,10 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         color={getCustomColor(intent)}
         className={`${className || ''} reqore-tag`}
         size={size}
-        ref={targetRef}
+        ref={(ref) => {
+          targetRef.current = ref;
+          setItemRef(ref);
+        }}
         asBadge={asBadge}
         minimal={minimal}
         removable={!!onRemoveClick}

package/src/components/Textarea/index.tsx

@@ -146,6 +146,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
     ref
   ) => {
     const { targetRef }: any = useCombinedRefs(ref);
+    const [inputRef, setInputRef] = useState<HTMLTextAreaElement>(null);
     const theme = useReqoreTheme('main', customTheme, intent);
     const [_value, setValue] = useState(value || '');
 
@@ -153,13 +154,9 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       setValue(value || '');
     }, [value]);
 
-    useTooltip(targetRef?.current, tooltip);
-    useAutosizeTextArea(targetRef?.current, _value, scaleWithContent);
-    useAutoFocus(
-      targetRef.current,
-      rest.readOnly || rest.disabled ? undefined : focusRules,
-      onChange
-    );
+    useTooltip(inputRef, tooltip);
+    useAutosizeTextArea(inputRef, _value, scaleWithContent);
+    useAutoFocus(inputRef, rest.readOnly || rest.disabled ? undefined : focusRules, onChange);
 
     return (
       <StyledTextareaWrapper
@@ -171,6 +168,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         _size={size}
         theme={theme}
         style={wrapperStyle}
+        ref={targetRef}
       >
         <StyledTextarea
           {...rest}
@@ -185,7 +183,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
           as='textarea'
           className={`${className || ''} reqore-control reqore-textarea`}
           _size={size}
-          ref={targetRef}
+          ref={(ref) => setInputRef(ref)}
           theme={theme}
           rounded={rounded}
           rows={1}

package/src/components/Tree/index.tsx

@@ -1,10 +1,9 @@
 import { cloneDeep, size as lodashSize } from 'lodash';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
-import { ReqoreMessage, ReqorePanel, ReqoreTextarea } from '../..';
+import { ReqoreMessage, ReqorePanel, ReqoreTextarea, useReqoreProperty } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
-import ReqoreContext from '../../context/ReqoreContext';
-import { getLineCount, getTypeFromValue } from '../../helpers/utils';
+import { getTypeFromValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
@@ -45,7 +44,7 @@ export const ReqoreTree = ({
   const [items, setItems] = useState({});
   const [allExpanded, setAllExpanded] = useState(expanded || !showControls);
   const [_showTypes, setShowTypes] = useState(showTypes);
-  const { addNotification } = useContext(ReqoreContext);
+  const addNotification = useReqoreProperty('addNotification');
 
   const handleCopyClick = () => {
     setMode('copy');
@@ -173,7 +172,6 @@ export const ReqoreTree = ({
   }
 
   const textData: string = renderText(data);
-  const lineCount: number = getLineCount(textData);
 
   return (
     <ReqorePanel
@@ -224,12 +222,11 @@ export const ReqoreTree = ({
         <ReqoreTextarea
           className='reqore-tree-textarea'
           id='tree-content'
-          defaultValue={textData}
+          value={textData}
           scaleWithContent
           size={size}
           fluid
           readOnly
-          rows={lineCount > 20 ? 20 : lineCount}
         />
       )}
     </ReqorePanel>

package/src/containers/PopoverProvider.tsx

@@ -1,9 +1,9 @@
 import { size } from 'lodash';
 import React, { MutableRefObject, useCallback, useEffect, useState } from 'react';
+import { useReqoreProperty } from '..';
 import Popover from '../components/InternalPopover';
 import PopoverContext from '../context/PopoverContext';
 import { IPopoverOptions } from '../hooks/usePopover';
-import { useReqore } from '../hooks/useReqore';
 
 export interface IReqorePopoverProviderProps {
   children: any;
@@ -17,7 +17,7 @@ export interface IPopoverData extends IPopoverOptions {
 
 const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiScale }) => {
   const [popovers, setPopovers] = useState<IPopoverData[]>([]);
-  const { closePopoversOnEscPress } = useReqore();
+  const closePopoversOnEscPress = useReqoreProperty('closePopoversOnEscPress');
 
   const handleClick = useCallback(
     (event: MouseEvent) => {

package/src/containers/ReqoreProvider.tsx

@@ -2,14 +2,16 @@ import { size } from 'lodash';
 import React, { useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import shortid from 'shortid';
+import { useContext } from 'use-context-selector';
 import { ReqoreModal, ReqoreTextEffect } from '..';
 import ReqoreNotificationsWrapper from '../components/Notifications';
 import ReqoreNotification, {
   IReqoreNotificationType,
 } from '../components/Notifications/notification';
 import { TSizes } from '../constants/sizes';
-import { TReqoreIntent } from '../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
+import ThemeContext from '../context/ThemeContext';
 import { IReqoreIconName } from '../types/icons';
 import { IReqoreOptions } from './UIProvider';
 
@@ -50,6 +52,7 @@ export interface IReqoreConfirmationModal {
 const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {} }) => {
   const [notifications, setNotifications] = useState<IReqoreNotificationData[] | null>([]);
   const [confirmationModal, setConfirmationModal] = useState<IReqoreConfirmationModal>({});
+  const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
   const latestZIndex = useRef<number>(9000);
 
   const isMobile = process.env.NODE_ENV === 'test' ? false : useMedia('(max-width: 480px)');
@@ -114,6 +117,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
       <ReqoreContext.Provider
         value={{
           notifications,
+          theme,
           addNotification,
           removeNotification,
           confirmAction,

package/src/containers/ThemeProvider.tsx

@@ -1,22 +1,12 @@
-import { useContext } from 'react';
 import { ThemeProvider } from 'styled-components';
+import { useContext } from 'use-context-selector';
 import { IReqoreTheme } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
 
-const ReqoreThemeProvider = ({
-  children,
-  theme,
-}: {
-  children: any;
-  theme?: IReqoreTheme;
-}) => {
+const ReqoreThemeProvider = ({ children, theme }: { children: any; theme?: IReqoreTheme }) => {
   const _theme: IReqoreTheme = useContext(ThemeContext);
 
-  return (
-    <ThemeProvider theme={theme || _theme}>
-      <>{children}</>
-    </ThemeProvider>
-  );
+  return <ThemeProvider theme={theme || _theme}>{children}</ThemeProvider>;
 };
 
 export default ReqoreThemeProvider;

package/src/context/PopoverContext.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
 import { IPopoverData } from '../containers/PopoverProvider';
 
 export default createContext<{

package/src/context/ReqoreContext.tsx

@@ -1,4 +1,5 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
+import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import { IReqoreConfirmationModal, IReqoreNotificationData } from '../containers/ReqoreProvider';
 import { IReqoreOptions } from '../containers/UIProvider';
 
@@ -15,6 +16,7 @@ export interface IReqoreContext {
   readonly tooltips?: IReqoreOptions['tooltips'];
   readonly closePopoversOnEscPress?: boolean;
   readonly latestZIndex?: number;
+  theme: IReqoreTheme;
 }
 
 export default createContext<IReqoreContext>({
@@ -27,4 +29,5 @@ export default createContext<IReqoreContext>({
     dialogs: true,
   },
   closePopoversOnEscPress: true,
+  theme: DEFAULT_THEME,
 });

package/src/context/ThemeContext.tsx

@@ -1,4 +1,4 @@
-import { createContext } from 'react';
+import { createContext } from 'use-context-selector';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 
 export default createContext<IReqoreTheme>(DEFAULT_THEME);

package/src/hooks/useLatestZIndex.ts

@@ -1,8 +1,10 @@
-import { useContext, useMemo } from 'react';
-import { ReqoreContext } from '..';
+import { useMemo } from 'react';
+import { useReqoreProperty } from './useReqoreContext';
 
 const useLatestZIndex = (): number => {
-  const { getAndIncreaseZIndex, latestZIndex } = useContext(ReqoreContext);
+  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
+  const latestZIndex = useReqoreProperty('latestZIndex');
+
   const zIndex = useMemo(() => getAndIncreaseZIndex(), [latestZIndex]);
 
   return zIndex;

package/src/hooks/usePopover.tsx

@@ -1,7 +1,9 @@
 import { Placement } from '@popperjs/core';
-import { MutableRefObject, useContext, useEffect, useMemo, useRef } from 'react';
+import { MutableRefObject, useEffect, useMemo, useRef } from 'react';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import shortid from 'shortid';
+import { useContext } from 'use-context-selector';
+import { useReqoreProperty } from '..';
 import { IPopoverData } from '../containers/PopoverProvider';
 import PopoverContext from '../context/PopoverContext';
 import {
@@ -11,7 +13,6 @@ import {
   IWithReqoreMinimal,
 } from '../types/global';
 import { IReqoreIconName } from '../types/icons';
-import { useReqore } from './useReqore';
 
 const startEvents = {
   hover: 'mouseenter',
@@ -78,7 +79,7 @@ const usePopover = ({
 }: IPopoverOptions): IPopoverControls => {
   const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
     useContext(PopoverContext);
-  const { tooltips } = useReqore();
+  const tooltips = useReqoreProperty('tooltips');
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 

package/src/hooks/useReqore.ts

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext } from 'use-context-selector';
 import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
 
 export const useReqore = (): IReqoreContext => {

package/src/hooks/useReqoreContext.ts

@@ -0,0 +1,16 @@
+import { useContextSelector } from 'use-context-selector';
+import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
+
+export const useReqoreProperty = <T extends keyof IReqoreContext>(
+  property: T
+): IReqoreContext[T] => {
+  const contextProperty = useContextSelector(ReqoreContext, (value) => {
+    if (!(property in value)) {
+      throw new Error(`Reqore context property ${property} not found`);
+    }
+
+    return value[property];
+  });
+
+  return contextProperty;
+};

package/src/hooks/useReqoreEffect.ts

@@ -1,18 +1,18 @@
-import { useContext, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   IReqoreEffect,
   TReqoreEffectGradientAnimationTrigger,
   TReqoreHexColor,
 } from '../components/Effect';
 import { IReqoreTheme } from '../constants/theme';
-import ThemeContext from '../context/ThemeContext';
+import { useReqoreTheme } from './useTheme';
 
 export const useReqoreEffect = (
   component: 'buttons',
   theme: IReqoreTheme,
   effect?: IReqoreEffect
 ): IReqoreEffect => {
-  let _theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+  let _theme: IReqoreTheme = useReqoreTheme();
 
   // Return the effect if the component is not defined in the theme
   if (!theme[component]) {