https://github.com/pladaria/react-mark-ii

Ultra small and fast text formatter (markdown-ish) for React
https://github.com/pladaria/react-mark-ii

Last synced: about 2 months ago
JSON representation

Ultra small and fast text formatter (markdown-ish) for React

• Host: GitHub
• URL: https://github.com/pladaria/react-mark-ii
• Owner: pladaria
• License: mit
• Created: 2017-05-14T11:49:08.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-07-09T17:06:17.000Z (over 7 years ago)
• Last Synced: 2024-11-07T16:45:13.285Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 79.1 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        








react-mark-ii


Ultra small and fast text formatter for React











## Features

  - Very small (parser is just **50 lines of code**!)

  - Super fast!

  - Dependency free

  - Configurable

## Live demo

[Demo!](https://runkit.com/pladaria/react-mark-ii-demo)

## Install

    npm install --save react-mark-ii

## Simple example

```javascript

import Mark from 'react-mark-ii';

//...

const str = '*bold* _emphasis_ ~strike~ `code` ```code\nblock```';

//...

{str}

```

Render result:

``` html



  bold

  emphasis

  strike

  code

  

    code

    block

  



```


## Custom options

With the `options` prop you can define your own markup:

Available mark options:

  - `renderer`: _React component_ or _tag name string_

  - `raw`: (default `false`) if `true`, inner marks will be ignored (useful for code marks)

  - `multiline`: (default `false`) if `true` marks can be used across multiple lines

  - `alwaysOpen`: (default `false`) by default, marks must be set after a break character (space or punctuation) and

  joined to an alphanumeric string). With `alwaysOpen` set to `true` you can ignore these checks. This is useful, for

  example, for multiline code blocks which may contain spaces after the mark.

```javascript

import Mark from 'react-mark-ii';

//...

const options = {

    '**': {renderer: 'b'},

    '_': {renderer: 'u'},

    '~': {renderer: ({children}) => {children}},

    '`': {renderer: 'kbd', raw: true},

    '```': {renderer: 'pre', raw: true, multiline: true, alwaysOpen: true},

};

const str = '**bold** _underline_ ~strike~ `code` ```code\nblock```';

//...

{str}

```

Render result:

```html



  bold

  underline

  strike

  code

  

    code

    block

  



```


## Custom wrapper

By default your children will be wrapped with a `div`. Use the `wrap` prop to have a different wrapper. You can use a React component or a tag name string.

```javascript

*text*

```

Render result:

```html



  text



```

## Other props

All other props are passed to the wrapper

```javascript

*text*

```

Render result:

```html



  text



```


## License

MIT

[Logo font](http://www.iconian.com/a.html)