react-in-markdown
v0.0.2
Published
Render custom React components in Markdown
Downloads
44
Maintainers
Readme
react-in-markdown
v0.0.1 🎉 - by @thekitze
⚠️ Warning: This is not a standalone library, it should be used along with the markdown-to-react-components library
What does it do?
This library allows you to render custom React Components when writing Markdown, using a special syntax.
[emoji](code=fire, size=35)
This will render the emoji
component, with {code:'fire', size:'35'}
as props.
How does rendering Markdown to React work?
In order to render Markdown to React components you should use the markdown-to-react-components library. Under the hood it's really simple, it uses marked to parse a string that contains Markdown, and it returns back React components.
The cool thing about the MTRC library is the configure
method which can customize the output of the components. An example:
import MTRC from 'markdown-to-react-components';
MTRC.configure({
h1: React.createClass({
render() {
return <h1 id={this.props.id} style={{color: 'red'}}>{this.props.children}</h1>
}
})
});
How to use react-in-markdown
In order to render custom React components inside of Markdown, you should plug the renderCustomComponents
method into the configuration of the a
element:
import MTRC from 'markdown-to-react-components';
import {renderCustomComponents} from 'react-in-markdown';
const customComponents = {
emoji: ({code,size}) => <div style={{fontSize:size}}> {code} </div>,
awesomeHeader: ({size=22, children}) => <h1> style={{fontSize:size}}>children </h1>
};
MTRC.configure({
a: props => renderCustomComponents(props, customComponents)
});
So when the parser finds the anchor syntax [emoji](code=fire,size=35)
it will try to check if emoji
is a key in our customComponents
object. In this case, emoji
is a key in our customComponents
object, so it will render that component with the props.
But if we have a regular link like [Kitze.io](http://kitze.io)
, it will see that Kitze.io
isn't a key in the customComponents
object so it will just render a regular link 👉 Kitze.io
ToDo
- Eval props after parsing them so we can use integers, booleans, arrays, and objects as props