reactstrap-md-textarea
v3.1.0
Published
A textarea for markdown input that also shows markdown
Downloads
52
Readme
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.