geoff-young

📝📞📹💻
Deconstructing React-Notion-X
Created
Oct 13, 2021 01:06 AM
status
Not completed
I'm loving using react-notion-x but I want more control. I'm a moron, lets see how it works.
The renderer uses global context. Does that get updated? How does it get updated?
 
type MapPageUrl = (pageId: string, recordMap?: types.ExtendedRecordMap | undefined) => string

interface NotionRendererProps {
mapPageUrl?: MapPageUrl
}

export const NotionRenderer: React.FC<NotionRendererProps> = ({
  mapPageUrl,
}) => {
  return (
    <NotionContextProvider
      mapPageUrl={mapPageUrl}
    >
)}
So the mapPageUrl function is passed into the NotionRenderer function.
Notion Renderer gets its recordMap from context
NotionBlockRenderer calls itself. The pages are rendered recursively. Block wraps renderer.
The components are recursively mapped with their own context. Keep passing props through notionrenderer if it has content, also render <block>
The record map is in context, the block is passed in through props to the component - ie collection-card
How does react-notion-x deal with code? It seems to be colored automatically instead of just taking the colors over from the notion app.