Skip to content
MDX logo
v1.5.2GitHub logo

TypeScript

Below are some basic typings to get started with:

declare module '@mdx-js/react' {
import * as React from 'react'
type ComponentType =
| 'p'
| 'h1'
| 'h2'
| 'h3'
| 'h4'
| 'h5'
| 'h6'
| 'thematicBreak'
| 'blockquote'
| 'ul'
| 'ol'
| 'li'
| 'table'
| 'tr'
| 'td'
| 'pre'
| 'code'
| 'em'
| 'strong'
| 'delete'
| 'inlineCode'
| 'hr'
| 'a'
| 'img'
export type Components = {
[key in ComponentType]?: React.ComponentType<{ children: React.ReactNode }>
}
export interface MDXProviderProps {
children: React.ReactNode
components: Components
}
export class MDXProvider extends React.Component<MDXProviderProps> {}
}

If you want to improve upon the types we would love a PR to improve the developer experience for TypeScript users.


If you’re getting errors from TypeScript related to imports with an *.mdx extension, create an mdx.d.ts file in your types directory and include it inside your tsconfig.json.

// types/mdx.d.ts
declare module '*.mdx' {
let MDXComponent: (props: any) => JSX.Element
export default MDXComponent
}
Edit this page on GitHub
Previous:
Transform Content
Next:
Support