0.3.0 • Published 1 year ago
@blocz/mdx-live v0.3.0
@blocz/mdx-live
@blocz/mdx-live
is a package that allows you to render a MDX string.
The difference with @mdx-js/runtime
is that @blocz/mdx-live
allows you to resolve import and export statements.
Examples
Simple MDX
import { MDX } from "@blocz/mdx-live";
const simpleMDX = `
### How it works
1. First item
2. Second item
---
### TL;DR
- First item
- Second item
- Nested list
- First nested \`item\`
- Second _nested_ item
- **Third** nested item
`;
const App = () => {
return <MDX code={simpleMDX} />;
};
With scope
import { MDX } from "@blocz/mdx-live";
const Button = ({ label, variant, onClick }) => (
<button data-variant={variant} onClick={onClick}>
{label}
</button>
);
const scopedMDX = `
<Button
variant="blue"
label="Click Me!"
onClick={() => alert('Hello there!')}
/>
`;
const App = () => {
return <MDX code={scopedMDX} defaultScope={{ Button }} />;
};
With export statement
import { MDX } from "@blocz/mdx-live";
const Button = ({ label, variant, onClick }) => (
<button data-variant={variant} onClick={onClick}>
{label}
</button>
);
const exportMDX = `
export const label = "Click Me!";
<Button
variant="blue"
label={label}
onClick={() => alert('Hello there!')}
/>
`;
const App = () => {
return <MDX code={exportMDX} defaultScope={{ Button }} />;
};
With import statement
import { MDX } from "@blocz/mdx-live";
const Button = ({ label, variant, onClick }) => (
<button data-variant={variant} onClick={onClick}>
{label}
</button>
);
const importMDX = `
import { Button } from 'example';
<Button
variant="blue"
label="Click Me!"
onClick={() => alert('Hello there!')}
/>
`;
const resolveImport = async (module, variable) => {
if (module === "example" && variable === "Button") {
return Button;
}
return undefined;
};
const App = () => {
return <MDX code={importMDX} resolveImport={resolveImport} />;
};
0.3.0
1 year ago
0.2.1
1 year ago
0.2.0-rc.9
1 year ago
0.2.0
1 year ago
0.2.0-rc.7
1 year ago
0.2.0-rc.6
1 year ago
0.2.0-rc.8
1 year ago
0.2.0-rc.5
1 year ago
0.2.0-rc.3
2 years ago
0.2.0-rc.2
2 years ago
0.2.0-rc.4
2 years ago
0.2.0-rc.1
2 years ago
0.2.0-rc
2 years ago
0.2.0-beta.4
2 years ago
0.1.0-beta.3
2 years ago
0.1.0-beta.2
2 years ago
0.1.0-beta.1
2 years ago
0.1.0-beta.0
2 years ago
0.2.0-beta.2
2 years ago
0.2.0-beta.1
2 years ago
0.2.0-beta.3
2 years ago
0.1.0
2 years ago
0.0.9
3 years ago
0.0.8
3 years ago
0.0.5
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.4
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago
0.0.0
4 years ago