How to use @mdx-js/tag - 10 common examples

To help you get started, we’ve selected a few @mdx-js/tag examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github dfee / rbx / src / __docs__ / components / component-doc.tsx View on Github external
}

  return (
    
  );
};

// tslint:disable-next-line:no-unsafe-any - mdx-tag
export const ForwardRefAsExoticComponentDoc = withMDXComponents(
  BaseForwardRefAsExoticComponentDoc,
);
github TallerWebSolutions / next-on-drupal / docs / docz / AnnotatedCode.js View on Github external
)) }
                      
                    
                  
                
              ) }
            
          ) }
        
      
    )
  }
}

// This component is not rendered, but used as placeholding.
export const Annotation = withMDXComponents(({ children, ...props }) =>
  typeof children === 'function' ? children(props) : children || null
)

Annotation.displayName = 'Annotation'

export default memo(withMDXComponents(AnnotatedCode))
github dfee / rbx / src / __docs__ / components / component-doc.tsx View on Github external
}) => {
  const componentFeaturesProps = { asType, customize, docPath };

  return (
    
      <title size="{4}">
        {name}
      </title>
      
      
    
  );
};

// tslint:disable-next-line:no-unsafe-any - mdx-tag
export const ComponentDoc = withMDXComponents(BaseComponentDoc);

export type ForwardRefAsExoticComponentDoc = {
  // tslint:disable-next-line:no-any
  component: ForwardRefAsExoticComponent;
  components: BaseSimplePropsTableProps["components"];
  customize: BaseComponentDocProps["customize"];
  docPath?: ComponentFeaturesProps["docPath"];
  props: BaseSimplePropsTableProps["props"];
};

const BaseForwardRefAsExoticComponentDoc: React.FC&lt;
  ForwardRefAsExoticComponentDoc
&gt; = ({ component, components, customize, docPath, props }) =&gt; {
  const asType = component.defaultProps.as as React.ReactType;
  const asTypeString =
    typeof asType === "string"
github TallerWebSolutions / next-on-drupal / docs / docz / AnnotatedCode.js View on Github external
) }
        
      
    )
  }
}

// This component is not rendered, but used as placeholding.
export const Annotation = withMDXComponents(({ children, ...props }) =&gt;
  typeof children === 'function' ? children(props) : children || null
)

Annotation.displayName = 'Annotation'

export default memo(withMDXComponents(AnnotatedCode))
github dfee / rbx / src / __docs__ / components / simple-props-table.tsx View on Github external
private readonly renderRow = (name: string, propDoc: PropDoc) =&gt; {
    return (
      
        {this.renderCellName(name)}
        {this.renderCellType(propDoc.typeName, propDoc.typeTip)}
        {this.renderCellRequired(propDoc.required)}
        {this.renderCellDefaultValue(propDoc.defaultValue)}
        {this.renderCellDescription(propDoc.description)}
      
    );
  };
}

// tslint:disable-next-line: no-unsafe-any
export const SimplePropsTable = withMDXComponents(BaseSimplePropsTable);
github jxnblk / mdx-docs / packages / mdx-live / src / index.js View on Github external
import React from 'react'
import {
  LiveProvider,
  LivePreview,
  LiveEditor,
  LiveError
} from 'react-live'
import { MDXProvider } from '@mdx-js/tag'
import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
export { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'

export const LiveCode = withMDXComponents(({
  previewStyle = {},
  editorStyle = {},
  errorStyle = {},
  previewProps = {},
  editorProps = {},
  errorProps = {},
  components,
  scope,
  ...props
}) =&gt;
github jxnblk / mdx-go / packages / mdx-live / src / index.js View on Github external
import React from 'react'
import {
  LiveProvider,
  LivePreview,
  LiveEditor,
  LiveError
} from 'react-live'
import { MDXProvider } from '@mdx-js/tag'
import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'
export { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'

export const LiveCode = withMDXComponents(({
  previewStyle = {},
  editorStyle = {},
  errorStyle = {},
  previewProps = {},
  editorProps = {},
  errorProps = {},
  components,
  scope,
  ...props
}) =&gt;
github jxnblk / mdx-docs / src / Context.js View on Github external
import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import { withMDXComponents } from '@mdx-js/tag/dist/mdx-provider'

const Context = React.createContext()

export const DocsProvider = withRouter(withMDXComponents(class extends React.Component {
  static propTypes = {
    routes: PropTypes.array.isRequired,
    location: PropTypes.object.isRequired,
  }

  render () {
    const { children, ...props } = this.props

    const route = props.routes.find(route => route.path === props.location.pathname)

    const context = {
      ...props,
      route
    }

    return (
github doczjs / docz / packages / docz / src / components / Annotations.tsx View on Github external
return 
}

type ProviderProps = Pick&gt;
const AnnotationsProvider: React.SFC = props =&gt; (
  &lt;&gt;
    {state.get(({ metadata }) =&gt; {
      const annotations = get('annotations', metadata)
      return annotations ? (
        
      ) : null
    })}
  
)

export const Annotations = withMDXComponents(AnnotationsProvider)
github fannypackui / fannypack / packages / website / components / LiveEditor.js View on Github external
margin: 0;
  background-color: ${palette('danger')};
  color: ${palette('dangerInverted')};
  overflow-x: auto;
`;
const LivePreview = styled(_LivePreview)`
  padding: 1.5em;
`;
const LiveProvider = styled(_LiveProvider)`
  border: 1px solid ${palette('white700')};
  border-radius: 2;
  margin-top: 1em;
  margin-bottom: 1em;
`;

export const LiveCode = withMDXComponents(({ components, scope, ...props }) =&gt; {
  const [code, setCode] = React.useState(props.code);

  const playroomUrl = React.useMemo(() =&gt; {
    return `/playroom/#?code=${code ? base64url.encode(code) : ''}`;
  }, [code]);

  function handleClickPlayroom() {
    window.open(playroomUrl, '_blank');
  }

  return (

@mdx-js/tag

A fully-featured Markdown/MDX React component for ambitious projects

MIT
Latest version published 6 years ago

Package Health Score

72 / 100
Full package analysis