How to integrate with Chakra-UI?

[angelhodar]

Hey! I just wanted to know if there is a guide on how to map (like with MDX components) each notion block with a custom chakra-ui component. For example, an h1 header on Notion could be mapped with a component in chakra. Also, what would happen when notion finally makes public their own API?

[transitive-bullshit]

Hey @angelhodar, I think I understand your use case, and I think you could build your own version of react-notion-x as something like react-notion-chakra, but doing this generically via an AST transformation like MDX would be pretty difficult and it's out of scope for this project.

With that being said, you can still use notion-client, notion-types, and notion-utils which are all frontend agnostic to build any type of Notion-based frontend on top of, using react-notion-x as a guide.

Hope that helps!

[angelhodar]

Hey @transitive-bullshit, thanks for your answer! It seems I had a wrong idea about how the notion page rendering works. I thought that any notion page element like title, tables, lists and so on could be replaced with custom components creating a mapping like the MDX components workflow does. If thats not the case, then I agree its not trivial. Thats why I commented the future notion public API, as I think they would provide a more human readable response like the current block maps and so on, so maybe the mapping can be done easily ;)