Expose custom fields in react context

packages/core/admin/admin/src/components/Providers/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { QueryClientProvider, QueryClient } from 'react-query';
-import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
+import { LibraryProvider, CustomFieldsProvider, StrapiAppProvider } from '@strapi/helper-plugin';
 import { Provider } from 'react-redux';
 import { AdminContext } from '../../contexts';
 import ConfigurationsProvider from '../ConfigurationsProvider';
@@ -25,6 +25,7 @@ const Providers = ({
   authLogo,
   children,
   components,
+  customFields,
   fields,
   getAdminInjectedComponents,
   getPlugin,
@@ -64,15 +65,17 @@ const Providers = ({
                   settings={settings}
                 >
                   <LibraryProvider components={components} fields={fields}>
-                    <LanguageProvider messages={messages} localeNames={localeNames}>
-                      <AutoReloadOverlayBlockerProvider>
-                        <OverlayBlocker>
-                          <GuidedTour>
-                            <Notifications>{children}</Notifications>
-                          </GuidedTour>
-                        </OverlayBlocker>
-                      </AutoReloadOverlayBlockerProvider>
-                    </LanguageProvider>
+                    <CustomFieldsProvider customFields={customFields}>
+                      <LanguageProvider messages={messages} localeNames={localeNames}>
+                        <AutoReloadOverlayBlockerProvider>
+                          <OverlayBlocker>
+                            <GuidedTour>
+                              <Notifications>{children}</Notifications>
+                            </GuidedTour>
+                          </OverlayBlocker>
+                        </AutoReloadOverlayBlockerProvider>
+                      </LanguageProvider>
+                    </CustomFieldsProvider>
                   </LibraryProvider>
                 </StrapiAppProvider>
               </ConfigurationsProvider>
@@ -88,6 +91,7 @@ Providers.propTypes = {
   authLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.any]).isRequired,
   children: PropTypes.element.isRequired,
   components: PropTypes.object.isRequired,
+  customFields: PropTypes.object.isRequired,
   fields: PropTypes.object.isRequired,
   getAdminInjectedComponents: PropTypes.func.isRequired,
   getPlugin: PropTypes.func.isRequired,

packages/core/admin/admin/src/pages/MarketplacePage/index.js

@@ -10,6 +10,7 @@ import {
   LoadingIndicatorPage,
   useNotification,
   useAppInfos,
+  useCustomFields,
 } from '@strapi/helper-plugin';
 import { Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
@@ -55,6 +56,9 @@ const MarketPlacePage = () => {
 
   useFocusWhenNavigate();
 
+  const { customFields } = useCustomFields();
+  console.log('customFields', customFields);
+
   const marketplaceTitle = formatMessage({
     id: 'global.marketplace',
     defaultMessage: 'Marketplace',

packages/core/helper-plugin/lib/src/contexts/CustomFieldsContext.js

@@ -0,0 +1,11 @@
+/**
+ *
+ * CustomFieldsContext
+ *
+ */
+
+import { createContext } from 'react';
+
+const CustomFieldsContext = createContext();
+
+export default CustomFieldsContext;

packages/core/helper-plugin/lib/src/hooks/useCustomFields/index.js

@@ -0,0 +1,18 @@
+/**
+ *
+ * useCustomFields
+ *
+ */
+
+import { useContext, useRef } from 'react';
+import CustomFieldsContext from '../../contexts/CustomFieldsContext';
+
+const useCustomFields = () => {
+  const { customFields } = useContext(CustomFieldsContext);
+  // Use a ref so we can safely add the custom fields to a hook dependencies array
+  const customFieldsRef = useRef(customFields);
+
+  return { customFields: customFieldsRef.current };
+};
+
+export default useCustomFields;

packages/core/helper-plugin/lib/src/index.js

@@ -15,6 +15,7 @@ export { default as useAppInfos } from './hooks/useAppInfos';
 
 export { default as useQuery } from './hooks/useQuery';
 export { default as useLibrary } from './hooks/useLibrary';
+export { default as useCustomFields } from './hooks/useCustomFields';
 export { default as useNotification } from './hooks/useNotification';
 export { default as useStrapiApp } from './hooks/useStrapiApp';
 export { default as useTracking } from './hooks/useTracking';
@@ -32,6 +33,7 @@ export { default as useLockScroll } from './hooks/useLockScroll';
 // Providers
 export { default as GuidedTourProvider } from './providers/GuidedTourProvider';
 export { default as LibraryProvider } from './providers/LibraryProvider';
+export { default as CustomFieldsProvider } from './providers/CustomFieldsProvider';
 export { default as NotificationsProvider } from './providers/NotificationsProvider';
 export { default as StrapiAppProvider } from './providers/StrapiAppProvider';
 

packages/core/helper-plugin/lib/src/providers/CustomFieldsProvider/index.js

@@ -0,0 +1,21 @@
+/**
+ *
+ * CustomFieldsProvider
+ *
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import CustomFieldsContext from '../../contexts/CustomFieldsContext';
+
+const CustomFieldsProvider = ({ children, customFields }) => {
+  return (
+    <CustomFieldsContext.Provider value={{ customFields }}>{children}</CustomFieldsContext.Provider>
+  );
+};
+
+CustomFieldsProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  customFields: PropTypes.object.isRequired,
+};
+
+export default CustomFieldsProvider;