Create a Simple Reusable React Code Block 

Code blocks are a nice addition to documentation but they don’t have to be complex. We can create a simple reusable code block in react.

code block

React Code component copying a selector.

This component will use react hooks and have the following imports:

import PropTypes from 'prop-types';
import React, {useState} from 'react';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import IconButton from '@material-ui/core/IconButton';
import CopyIcon from '@material-ui/icons/FileCopy';
import Snackbar from '@material-ui/core/Snackbar';
import makeStyles from '@material-ui/core/styles/makeStyles';

You can add them to your project by:

yarn add material-ui
yarn add react-copy-to-clipboard

Let’s add a little style to our code blocks and finally implement our component for reuse.