GitHub - bgub/react-admonitions: An admonitions React component, ported from remarkable-admonitions. Perfect for Docusaurus v2 and other React-based doc generators

1 min read Original article ↗

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

NPM JavaScript Style Guide Build Status

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

Example Pictures

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