Closed AnderUstarroz closed 1 year ago
@AnderUstarroz
import React from "react";
import MarkdownPreview from "@uiw/react-markdown-preview";
const source = `## Markdown Preview
> todo: React component preview markdown text.
`;
function Demo() {
return (
<>
<MarkdownPreview
source={source}
components={{
h2: () => {
return <div>xxx</div>;
}
}}
/>
</>
);
}
container
cannot be customized, but can pass props
=> warpperElement
. @AnderUstarroz
hi @jaywcjlove, is there a way to pass some kind of useEffect, or onLoad event so the container can be animated once his content is loaded?
I haven't tried it, but it should be possible to add css animations. @AnderUstarroz
Thanks I think I'll rather use my own wrapper:
import ReactMarkdown from "react-markdown";
export default function Markdown(props: MarkdownPropsType) {
return (
<ReactMarkdown
linkTarget={"_blank"}
components={{
a: ({ node, children, ...props }) => {
const linkProps = props;
if (props.target === "_blank") {
linkProps["rel"] = "noopener noreferrer";
}
return <a {...linkProps}>{children}</a>;
},
}}
>
{props.children}
</ReactMarkdown>
);
}
The idea was to use Framer motion to create animated containers when loaded etc, Is there a way to replace the preview container by a customized React component? I have tried the following but doesn't seem to work: