react-interactive-code-block

React interactive code block component

Usage no npm install needed!

<script type="module">
  import reactInteractiveCodeBlock from 'https://cdn.skypack.dev/react-interactive-code-block';
</script>

README

React Interactive Code Block Component

NPM JavaScript Style GuideLicense Known VulnerabilitiesDownloads

Reusable interactive code block component for React. Here you can find a live demo.

Install

npm install --save react-interactive-code-block

or

yarn add -D react-interactive-code-block

Usage

import CodeBlock from 'react-interactive-code-block'
import 'react-interactive-code-block/dist/index.css'

class Example extends Component {
  render() {
    return <CodeBlock
      message={'Interactive code block 😄'}
      typing
      speed={30}
      />
  }
}

Props

name type isRequired default description
message string ✔ N/A text shown in container
typing bool ✖ false typing effect
speed number ✖ -1 velocity of the typing effect, requires typing
icon string ✖ icon copy icon
className string ✖ undefined className of the container
style object ✖ {} custom styles

Examples

License

MIT © mecm1993