Deconstructing React-Notion-X
Oct 13, 2021 01:06 AM
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> = ({
}) => {
  return (
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.