
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
vite-plugin-react-markdown
Advanced tools
The following is based on a Chinese document that was translated using Google Translate
English | 简体中文
pnpm add vite-plugin-react-markdown -D
# npm i vite-plugin-react-markdown -D
# yarn add vite-plugin-react-markdown -D
vite.config
import react from "@vitejs/plugin-react";
import Markdown from "vite-plugin-react-markdown";
export default {
plugins: [
Markdown(),
react({
include: [/\.tsx$/, /\.md$/], // <-- add .md
}),
],
};
import ReactComponent from "./vite-plugin-react-markdown-example.md";
function App() {
return <ReactComponent />;
}
export default App;
Use this feature to make sure your Component uses the
export default
export instead of theexport Component
. 。Components that do not have the same name。
first of all, you need to configure wrapperComponent
, and you can set it to true
, so that all components can be used in md files (this will also cause some performance problems).
// vite.config
// other code omitted
Markdown({
wrapperComponent: true,
});
you can also set it to src/**/*.{jsx,tsx}
to read only the components in the src file.
Markdown({
wrapperComponent: "src/**/*.{jsx,tsx}",
});
if you want to take components of multiple different folders, you can send an array.
Markdown({
wrapperComponent: ["src/**/*.{jsx,tsx}", "other/**/*.{jsx,tsx}"],
});
if you pursue the ultimate performance, you can also specify which components to load.
you need to pass an object, the key is the name of the component, and the value is the path relative to the root directory.
Markdown({
wrapperComponent: { Counter: "src/component/Counter/Counter.tsx" },
});
After the configuration is completed, you can use the right components directly in the md file.
If the component is not specified, the name of the component used is its path name.
For example: src/component/
Counter.tsx
, The component is calledCounte
(If the initials are lowercase, they will be converted to uppercase.)
# An example of loading components
<Counter/>
// vite-plugin-react-markdown-example.md
---
title: vite-plugin-react-markdown
---
# Hello World
// example.tsx
import React from 'react'
// import attributes
import ReactComponent, { attributes } from './vite-plugin-react-markdown-example.md';
function App() {
return (
<React.Fragment>
{attributes.title} {/* attributes.name的值是vite-plugin-react-markdown */}
<ReactComponent />
</React.Fragment >
);
}
export default App;
When I want to add attributes.title to all components , you need to set up wrapperComponentPath
add vite.config Configuration
Markdown({
wrapperComponent: { Counter: "src/component/Counter/Counter.tsx" },
wrapperComponentPath: "src/component/Page",
});
// src/component/Page
import type { ReactNode } from "react";
import React from "react";
interface Props {
attributes: Record<string, any>;
children: ReactNode;
}
// props will contain attributes
function Page(props: Props) {
const { children, attributes } = props;
return (
<React.Fragment>
<h1>{attributes.name}</h1>
{children}
</React.Fragment>
);
}
export default Page;
For details, you can check tsdoc.
vite-plugin-react-markdown
uses markdown-it under the hood, see markdown-it
's docs for more details
Pass a function that will receive an instance of 'markdown-it', where you can add a plugin.
add markdown-it
plugin
default : vite-plugin-react-markdown
By default, you will use a div
to wrap the markdown content, where you can set this div to get className.
You can also use a component to wrap the markdown content. Please enter the component path relative to the root directory.
Configure this property,
wrapperClasses
will expire. You can set className yourself in the component.
default : ViteReactMarkdown
If you configure wrapperComponentPath
, you can customize the name of component loading.
declare module "*.md" {
import React from "react";
const ReactComponent: React.VFC;
export default ReactComponent;
export const attributes = Record<string, any>;
}
// configured wrapperComponentPath, you will use it.
interface WrapperComponentProps {
attributes: Record<string, any>;
importComponentName: string[];
}
The project is inspired by vite-plugin-vue-markdown
Some of the code is implemented from vite-plugin-markdown
FAQs
Compile Markdown to React component
The npm package vite-plugin-react-markdown receives a total of 224 weekly downloads. As such, vite-plugin-react-markdown popularity was classified as not popular.
We found that vite-plugin-react-markdown demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.