How to use a custom container

[AnderUstarroz]

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:

import { motion } from "framer-motion";

<MarkdownPreview
  source={game.cached.definition?.description}
  linkTarget="_blank"
  components={{
    div({ node, className, children, ...props }) {
      return <motion.div className="MyCustomizedContainer">{children}</motion.div>;
    },
  }}
/>

[jaywcjlove]

https://github.com/uiwjs/react-md-editor/blob/2bc736d582263edba763bf7d1066c85a80156fc6/www/src/Markdown.tsx#L53-L55

@AnderUstarroz

example: https://codesandbox.io/embed/react-markdown-preview-uiwjs-react-markdown-preview-issues-206-6wvvih?fontsize=14&hidenavigation=1&theme=dark

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>;
          }
        }}
      />
    </>
  );
}

[jaywcjlove]

https://github.com/uiwjs/react-markdown-preview/blob/bc68750401b8c638c6ab21f34ab5ef83ae228ef7/src/index.tsx#L97

container cannot be customized, but can pass props => warpperElement. @AnderUstarroz

[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?

[jaywcjlove]

I haven't tried it, but it should be possible to add css animations. @AnderUstarroz

[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>
  );
}