feat: useRendererProps hook

Use props for specific renderers, from the values of `renderersProps` record. For example, `useRendererProps('p')`.
meliorence · Jun 4, 2021 · 87982c4 · 87982c4
1 parent 512a7cc
commit 87982c4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/packages/render-html/src/context/SharedPropsContext.ts b/packages/render-html/src/context/SharedPropsContext.ts
@@ -19,7 +19,8 @@ export const defaultSharedPropsContext: Required<RenderHTMLPassedProps> = {
   listsPrefixesRenderers: {},
   onLinkPress: (_e, href) => Linking.canOpenURL(href) && Linking.openURL(href),
   WebView: () => null,
-  defaultWebViewProps: {}
+  defaultWebViewProps: {},
+  renderersProps: {}
 };
 
 const SharedPropsContext = React.createContext<Required<RenderHTMLPassedProps>>(
@@ -30,6 +31,14 @@ export function useSharedProps() {
   return React.useContext(SharedPropsContext);
 }
 
+export function useRendererProps<
+  R extends Record<string, any> = Record<string, any>
+>(k: keyof R) {
+  return React.useContext(SharedPropsContext).renderersProps[
+    k as string
+  ] as R[typeof k];
+}
+
 export function useDefaultTextProps(): TextProps {
   return useSharedProps().defaultTextProps;
 }

diff --git a/packages/render-html/src/index.ts b/packages/render-html/src/index.ts
@@ -23,6 +23,7 @@ export { default as extendDefaultRenderer } from './render/extendDefaultRenderer
 export { default as splitBoxModelStyle } from './helpers/splitBoxModelStyle';
 export {
   useSharedProps,
+  useRendererProps,
   useComputeMaxWidthForTag
 } from './context/SharedPropsContext';
 

diff --git a/packages/render-html/src/shared-types.ts b/packages/render-html/src/shared-types.ts
@@ -84,6 +84,10 @@ export interface RenderHTMLPassedProps<P = any> {
     href: string,
     htmlAttribs: HtmlAttributesDictionary
   ) => void;
+  /**
+   * Props to use in custom renderers with `useRendererProps` or `useSharedProps`.
+   */
+  renderersProps?: Record<string, any>;
   /**
    * Default props for Text elements in the render tree.
    *
@@ -235,10 +239,6 @@ export interface RenderHTMLProps<P = any>
    * Your custom renderers.
    */
   renderers?: CustomTagRendererRecord;
-  /**
-   * Set of props accessible into your custom renderers in `passProps` (4th argument)
-   */
-  renderersProps?: any;
   /**
    * Custom style for the default container of the rendered HTML.
    */