reactstrap-md-textarea

A markdown textarea component

This component is for allowing input in markdown format and then showing it to the user in a separate tab. The tabs are handled by the reactstrap library that relies on the bootstrap components. Checkout the examples.

Basic usage

You have will set a limited number of properties. All properties except for allowFilteredHtml are passed to the underlying reactstrap::Input element. For displaying the markdown is passed through react-markdown package.

import { Textarea as MdTextarea } from 'reactstrap-md-textarea';

...
<MdTextarea
  onChange={(e) => this.onChange('mdTxt', e.target.value)}
  value={this.state.mdTxt}
/>

Adding html direct rendering

As you may sometimes need advanced html features there is an option of passing direct html to the component. It will render the html onto a div after sanitizing the input using xss. Note! the function doesn't filter the return value. That is up to the user.

import { Textarea as MdTextarea } from 'reactstrap-md-textarea';

...
<MdTextarea
  onChange={(e) => this.onChange('htmlTxt', e.target.value)}
  rows={10}
  allowFilteredHtml={true}
  value={this.state.htmlTxt}
/>

Formatter

The package also exposes the formatter with the markdown and html options:

import { FormattedText } from 'reactstrap-md-textarea';

<FormattedText value="#My MD text" />

Changelog

3.1.0

• Updated to React 18 and other dependencies
• Dropped Flow support
• Moved to eslint setup

3.0.0

• Changed to React 16.8+ with hooks. Dropped the getFilteredValue in favor of a reference filteredValue.

2.0.0

• Dropped pure input type. The component should only be used when markdown output has been requested.