Menu

📰
0

How to load and render Markdown files into your Vite React app using Typescript

DEV Community: chakraui·Daniel·about 1 month ago
#z1BIqtYv
#dev#class#code#markdown#highlight#article
Reading 0:00
15s threshold

Backstory (Skip it if you want) Ok so I was **REALLY **struggling with this one. I’m building an app, and for ease of use and maintenance, for the terms and conditions, privacy policy and other stuff I wanted to write them in markdown instead of plain TSX. I could not find anything on my particular environment: Vite + React + Typescript + ChakraUI. So here’s what worked for me: The solution Test your markdown flow First thing’s first, get your markdown rendering straight: Install react-markdown : npm i react-markdown If you don’t use ChakraUI skip this step: Install chakra-ui-markdown-renderer : ChakraUI messes with the typical <h2> and other HTML stuff, so react-markdown won’t work unless we pass a custom renderer: npm i chakra-ui-markdown-renderer Now create a simple component to test your markdown: import { Box } from " @chakra-ui/react " ; import ReactMarkdown from " react-markdown " ; import ChakraUIRenderer from " chakra-ui-markdown-renderer " ; const MarkdownTest = () => { return ( < Box…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More