👽️ Use Chakra's Context creator for State Management

src/auto-complete-fixed-item.tsx

@@ -8,13 +8,12 @@ import {
 import { runIfFn } from '@chakra-ui/utils';
 import React, {
   MouseEventHandler,
-  useContext,
   useEffect,
   useImperativeHandle,
   useRef,
 } from 'react';
 import { itemActiveStyles, itemBaseStyles } from './auto-complete-item';
-import { StoreContext } from './store';
+import { useAutoCompleteContext } from './store';
 import { ItemAction } from './store/reducers/item';
 
 type SelectMethod = 'click' | 'keyboard';
@@ -45,7 +44,7 @@ export const AutoCompleteFixedItem = forwardRef<
       item: { filtered: filterdItems, active: activeItemIndex },
     },
     dispatch,
-  } = useContext(StoreContext);
+  } = useAutoCompleteContext();
 
   useEffect(() => {
     dispatch({

src/auto-complete-group.tsx

@@ -8,9 +8,9 @@ import {
   Text,
   TextProps,
 } from '@chakra-ui/react';
-import React, { useContext } from 'react';
+import React from 'react';
 import { hasFirstOption } from './helpers/group';
-import { StoreContext } from './store';
+import { useAutoCompleteContext } from './store';
 
 export interface AutoCompleteGroupProps extends StackProps {
   children?: any;
@@ -31,7 +31,7 @@ export const AutoCompleteGroup = forwardRef<AutoCompleteGroupProps, 'div'>(
       ...rest
     } = props;
 
-    const { state } = useContext(StoreContext);
+    const { state } = useAutoCompleteContext();
 
     const noDivider = hasFirstOption(children, state);
 

src/auto-complete-input.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, Input, InputProps, useMergeRefs } from '@chakra-ui/react';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { runIfFn } from '@chakra-ui/utils';
-import { StoreContext } from './store';
+import { useAutoCompleteContext } from './store';
 import { InputAction } from './store/reducers/input';
 import { handleNavigation, useOptionsFilter } from './helpers/input';
 import { ListAction } from './store/reducers/list';
@@ -16,7 +16,7 @@ export const AutoCompleteInput = forwardRef<AutoCompleteInputProps, 'input'>(
     const internalRef = useRef<HTMLInputElement>(null);
     const inputRef = useMergeRefs(ref, internalRef);
 
-    const { state, dispatch } = useContext(StoreContext);
+    const { state, dispatch } = useAutoCompleteContext();
     const {
       autocomplete,
       list: { ref: listRef, visible: listIsVisible },

src/auto-complete-item.tsx

@@ -1,10 +1,10 @@
 import { CSSObject, Flex, FlexProps, forwardRef } from '@chakra-ui/react';
 import { runIfFn } from '@chakra-ui/utils';
-import React, { MouseEventHandler, useContext } from 'react';
+import React, { MouseEventHandler } from 'react';
 import { useOnOptionHighlight } from './helpers/autocomplete-props/onOptionHighlight';
 import { runOnSelect } from './helpers/autocomplete-props/onSelectOption';
 import { useEmphasizer } from './helpers/item';
-import { StoreContext } from './store';
+import { useAutoCompleteContext } from './store';
 import { ItemAction } from './store/reducers/item';
 
 export interface AutoCompleteItemProps extends FlexProps {
@@ -28,7 +28,7 @@ export const AutoCompleteItem = forwardRef<AutoCompleteItemProps, 'div'>(
       // disabled,
       ...rest
     } = props;
-    const { state, dispatch } = useContext(StoreContext);
+    const { state, dispatch } = useAutoCompleteContext();
     const {
       autocomplete: { emphasize },
       input: { value: inputValue },

src/auto-complete-list.tsx

@@ -4,7 +4,7 @@ import {
   PopoverContentProps,
   useMergeRefs,
 } from '@chakra-ui/react';
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { CreateInput } from './components/create-input';
 import { EmptyState } from './components/empty-state';
 import {
@@ -13,7 +13,7 @@ import {
   handleListChild,
   useRefDimensions,
 } from './helpers/list';
-import { StoreContext } from './store';
+import { useAutoCompleteContext } from './store';
 import { Item, ItemAction } from './store/reducers/item';
 import { ListAction } from './store/reducers/list';
 
@@ -25,7 +25,7 @@ export const AutoCompleteList = forwardRef<AutoCompleteListProps, 'div'>(
     const refs = useMergeRefs(ref, outRef);
     const { children, ...rest } = props;
     const childCount = React.Children.count(children);
-    const { state, dispatch } = useContext(StoreContext);
+    const { state, dispatch } = useAutoCompleteContext();
     const { input } = state;
 
     useEffect(() => {
@@ -48,9 +48,7 @@ export const AutoCompleteList = forwardRef<AutoCompleteListProps, 'div'>(
         _focus={{ boxShadow: 'none' }}
         {...rest}
       >
-        {React.Children.map(children, (child) =>
-          handleListChild(child, state)
-        )}
+        {React.Children.map(children, child => handleListChild(child, state))}
         <CreateInput />
         <EmptyState
           onClick={() => {

src/auto-complete.tsx

@@ -1,8 +1,8 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Box, forwardRef, Popover } from '@chakra-ui/react';
 import { runIfFn } from '@chakra-ui/utils';
 import { AutoComplete } from './auto-complete-provider';
-import { StoreContext } from './store';
+import { useAutoCompleteContext } from './store';
 import { InputAction } from './store/reducers/input';
 import { AutoCompleteAction } from './store/reducers/autocomplete';
 import { closeList } from './helpers/list';
@@ -11,7 +11,7 @@ export const AutoCompleteBody = forwardRef<AutoComplete, 'div'>(
   (props, ref) => {
     const { children, onChange, ...rest } = props;
 
-    const { state, dispatch } = useContext(StoreContext);
+    const { state, dispatch } = useAutoCompleteContext();
 
     const {
       autocomplete: { value: autoCompleteValue },

src/components/create-input.tsx

@@ -1,8 +1,8 @@
 import { chakra, ChakraComponent } from '@chakra-ui/system';
 import { runIfFn } from '@chakra-ui/utils';
-import React, { useContext } from 'react';
+import React from 'react';
 import { AutoCompleteItem } from '../auto-complete-item';
-import { StoreContext } from '../store';
+import { useAutoCompleteContext } from '../store';
 
 export const CreateInput = () => {
   const {
@@ -11,7 +11,7 @@ export const CreateInput = () => {
       autocomplete: { creatable, emphasize },
       input: { value: inputValue },
     },
-  } = useContext(StoreContext);
+  } = useAutoCompleteContext();
 
   const itemExists = item.list.some(i => i.value === inputValue);
 

src/components/empty-state.tsx

@@ -1,14 +1,14 @@
 import { Box, BoxProps, Flex, FlexProps } from '@chakra-ui/layout';
-import React, { useContext } from 'react';
-import { StoreContext } from '../store';
+import React from 'react';
+import { useAutoCompleteContext } from '../store';
 
 export const EmptyState = (props: BoxProps) => {
   const {
     state: {
       item: { filtered },
       autocomplete: { emptyState },
     },
-  } = useContext(StoreContext);
+  } = useAutoCompleteContext();
 
   return (
     <Box {...props}>

src/helpers/autocomplete-props/onOptionHighlight.ts

@@ -1,14 +1,14 @@
-import { useContext, useEffect } from 'react';
+import { useEffect } from 'react';
 import { runIfFn } from '@chakra-ui/utils';
-import { StoreContext } from '../../store';
+import { useAutoCompleteContext } from '../../store';
 import { Item } from '../../store/reducers/item';
 
 export const useOnOptionHighlight = (activeItem: Item) => {
   const {
     state: {
       autocomplete: { onOptionHighlight },
     },
-  } = useContext(StoreContext);
+  } = useAutoCompleteContext();
   useEffect(() => {
     runIfFn(onOptionHighlight, activeItem?.value);
   }, [activeItem]);

src/helpers/input.ts

@@ -1,5 +1,5 @@
-import React, { useContext, useEffect } from 'react';
-import { State, StoreContext, StoreDispatch } from '../store';
+import React, { useEffect } from 'react';
+import { State, useAutoCompleteContext, StoreDispatch } from '../store';
 import { InputAction } from '../store/reducers/input';
 import { ItemAction } from '../store/reducers/item';
 import { runOnSelect } from './autocomplete-props/onSelectOption';
@@ -13,7 +13,7 @@ export const useOptionsFilter = () => {
       item,
     },
     dispatch,
-  } = useContext(StoreContext);
+  } = useAutoCompleteContext();
   const inputValue = input.value;
   const options = item.list;
   const filteredItems = options.filter(

src/store/index.tsx

@@ -1,5 +1,6 @@
-import { BoxProps } from '@chakra-ui/layout';
-import React, { createContext, Dispatch, ProviderProps } from 'react';
+import { BoxProps } from '@chakra-ui/react';
+import { createContext } from '@chakra-ui/react-utils';
+import React, { Dispatch } from 'react';
 import { AutoComplete } from '../auto-complete-provider';
 import { AutoCompleteActions } from './reducers/autocomplete';
 import { InputActions } from './reducers/input';
@@ -48,10 +49,10 @@ type ContextValue = {
   dispatch: StoreDispatch;
 };
 
-export const StoreContext = createContext({} as ContextValue);
+export const [AutoCompleteProvider, useAutoCompleteContext] = createContext<
+  ContextValue
+>({
+  name: 'AutoCompleteContext',
+});
 
-const StoreProvider = (props: ProviderProps<ContextValue>) => (
-  <StoreContext.Provider {...props} />
-);
-
-export default StoreProvider;
+export default AutoCompleteProvider;