https://github.com/gforge/reactstrap-md-textarea
Textare with markdown & html capacity
https://github.com/gforge/reactstrap-md-textarea
Last synced: over 1 year ago
JSON representation
Textare with markdown & html capacity
- Host: GitHub
- URL: https://github.com/gforge/reactstrap-md-textarea
- Owner: gforge
- License: mit
- Created: 2018-04-09T09:36:29.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-10-21T21:15:30.000Z (over 3 years ago)
- Last Synced: 2025-02-03T13:15:31.419Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://gforge.github.io/reactstrap-md-textarea
- Size: 9.55 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://badge.fury.io/js/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`](https://www.npmjs.com/package/reactstrap) library
that relies on the [bootstrap](https://getbootstrap.com/) components.
Checkout the [examples](https://gforge.github.io/reactstrap-md-textarea/).
## 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`](https://www.npmjs.com/package/react-markdown)
package.
```{js}
import { Textarea as MdTextarea } from 'reactstrap-md-textarea';
...
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](https://www.npmjs.com/package/xss). **Note!** the function
doesn't filter the return value. That is up to the user.
```{js}
import { Textarea as MdTextarea } from 'reactstrap-md-textarea';
...
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:
```{js}
import { FormattedText } from 'reactstrap-md-textarea';
```
## 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.