storybook-addon-mdx-embed

    0.0.22 • Public • Published

    Storybook Addon MDX Embed

    MDX Embed allows you to easily embed popular 3rd party media content such as YouTube videos, Tweets, Instagram posts and many more straight into your .mdx - no import required!

    https://mdx-embed.com/

    Install

    npm install mdx-embed storybook-addon-mdx-embed --save

    Setup

    Add storybook-addon-mdx-embed to your addons array in main.js

    // main.js
    module.exports = {
     ...
      addons: ['storybook-addon-mdx-embed']
    };

    Alternatively

    The plugin works by using Storybooks' parameters export and wrapping the docs children with the MDXEmbedProvider.

    If you encounter any issues with the addon you could try manually including the MDXEmbedProvider in you project. Ensure you have removed the addon from your dependencies and addons array in main.js then add the following to preview.js

    // preview.js
    import React from 'react';
    import { DocsContainer } from '@storybook/addon-docs/blocks';
    import { MDXEmbedProvider } from 'mdx-embed';
    
    export const parameters = {
      docs: {
        container: ({ children, context }) => (
          <DocsContainer context={context}>
            <MDXEmbedProvider>{children}</MDXEmbedProvider>
          </DocsContainer>
        ),
      },
    };

    For more information about how to install the package please see the docs

    Install

    npm i storybook-addon-mdx-embed

    DownloadsWeekly Downloads

    1,983

    Version

    0.0.22

    License

    MIT

    Unpacked Size

    5.89 kB

    Total Files

    6

    Last publish

    Collaborators

    • pauliescanlon