https://github.com/rafgraph/react-simplemark
React component and renderer for Simplemark
https://github.com/rafgraph/react-simplemark
Last synced: 10 months ago
JSON representation
React component and renderer for Simplemark
- Host: GitHub
- URL: https://github.com/rafgraph/react-simplemark
- Owner: rafgraph
- License: mit
- Created: 2017-05-29T20:12:22.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2020-10-02T04:39:27.000Z (over 5 years ago)
- Last Synced: 2025-07-12T01:04:58.784Z (11 months ago)
- Language: JavaScript
- Homepage: https://simplemark.rafgraph.dev
- Size: 73.2 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Simplemark
[Demo website](https://simplemark.rafgraph.dev)
React component and renderer for [Simplemark](https://github.com/rafgraph/simplemark) (*never* uses `dangerouslySetInnerHTML`). Code styled with Prettier.
```shell
$ yarn add react-simplemark
# OR
$ npm install --save react-simplemark
```
```js
import React from 'react';
import Simplemark from 'react-simplemark';
const stringContainingSimplemarkSource = '# Simplemark Parser is Small ~1KB!!';
class App extends React.Component {
render() {
return (
{stringContainingSimplemarkSource}
);
}
}
```
```js
// you can optionally provide `renderer` and `as` props to
// (as well as pass through props for the container)
...
{stringContainingSimplemarkSource}
```
## API
### ``
#### `children: string`
- String containing the Simplemark source to render
- Not required, but if not provided `` returns `null` and does not render
#### `as: string | ReactComponent`
- Not required, default is `'div'`
- What the simplemark container element is rendered as
- String as an html tag name, e.g. `'div'` will render a `
` container, `'section'` will render a `` container, etc...
- If you provide a `ReactComponent` instead of a string, the rendered simplemark will be passed down as an array of `children` to that component
#### `renderer: object`
- Not required, but if it is not provided unstyled ReactElements will be created
- Object with React Components for each type of element created by Simplemark
- For a reference `renderer` with bare bones React Components see [`simplemarkReactRenderer.js`](https://github.com/rafgraph/react-simplemark/blob/main/src/simplemarkReactRenderer.js)
```js
// list of all element types created by Simplemark
// if an element type is not present, the default renderer for that type is used
const renderer = {
Heading: /* ReactComponent */,
Paragraph: /* ReactComponent */,
Link: /* ReactComponent */,
Emph: /* ReactComponent */,
Strong: /* ReactComponent */,
InlineBreak: /* ReactComponent */,
BlockBreak: /* ReactComponent */,
};
```
#### `...rest`
- All other props will be passed down to the simplemark container element, e.g. `className`, `style`, etc...
- For example `# Some Heading` will render on the page as `
Some Heading
`