react-admonitions

An admonitions React component, ported from remarkable-admonitions. Perfect for Docusaurus v2 and other React-based doc generators.

TL;DR Nice-looking hints, warnings, etc. specifically targeted toward Docusaurus docs websites.

Test the component out on Stackblitz, or view the demo

Install

npm install --save react-admonitions

Screenshots

Usage

import React, { Component } from 'react'
 
import Admonition from 'react-admonitions'
 
class Example extends Component {
  render() {
    return (
      <Admonition type="warning" title="Do not do this">
        Admonition Content
      </Admonition>
    )
  }
}

Props

Name	Default	Description
type	none	What type of admonition you want to display. Valid options: "warning", "tip", "caution", "note", "important", "question"
iconType	"svg"	The type of admonition icon. Valid options: "svg", "emoji"
title	none	The, well, title of the admonition

Credits

HTML, styles, and concept all come from the amazing Markdown plugin by @favoloso, remarkable-admonitions.

License

MIT © nebrelbug