How to use react-refractor - 4 common examples

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Refractor from 'react-refractor'
import jsx from 'refractor/lang/jsx'
// import 'prismjs/themes/prism-twilight'
import {createStyle} from '../../utils/style-utils';

import style from './style';

Refractor.registerLanguage(jsx);






export default class CodeBlock extends Component{
	static propTypes = {
		value: PropTypes.string
	};

	render(){
		const {className, value, ...otherProps} = this.props;
		const s = createStyle(style, className);
		return (
			<div></div>

import {useReducer, useMemo} from 'react';
import {FaCode} from 'react-icons/fa';
import Refractor from 'react-refractor';
import jsx from 'refractor/lang/jsx';
import tsx from 'refractor/lang/tsx';
import bash from 'refractor/lang/bash';
import 'prism-themes/themes/prism-vs.css';
import c from './index.less';

Refractor.registerLanguage(jsx);
Refractor.registerLanguage(tsx);
Refractor.registerLanguage(bash);

const SourceCode = ({className, source, toggle, language}) => {
    const [visible, toggleVisible] = useReducer(v => !v, !toggle);
    const text = useMemo(
        () => source
            .replace('../../../src', 'react-suspense-boundary')
            .replace(/import SourceCode from.+\n/, '')
            .replace(/\/\/ eslint-disable-next-line import\/no-webpack-loader-syntax.+\n/g, '')
            .replace(/import source from '..\/SourceCode\/loader.+\n/g, '')
            .replace(/\s+ text.split('\n').map((t, i) => i + 1),
        [text]

import {useReducer, useMemo} from 'react';
import {FaCode} from 'react-icons/fa';
import Refractor from 'react-refractor';
import jsx from 'refractor/lang/jsx';
import tsx from 'refractor/lang/tsx';
import bash from 'refractor/lang/bash';
import 'prism-themes/themes/prism-vs.css';
import c from './index.less';

Refractor.registerLanguage(jsx);
Refractor.registerLanguage(tsx);
Refractor.registerLanguage(bash);

const SourceCode = ({className, source, toggle, language}) => {
    const [visible, toggleVisible] = useReducer(v => !v, !toggle);
    const text = useMemo(
        () => source
            .replace('../../../src', 'react-suspense-boundary')
            .replace(/import SourceCode from.+\n/, '')
            .replace(/\/\/ eslint-disable-next-line import\/no-webpack-loader-syntax.+\n/g, '')
            .replace(/import source from '..\/SourceCode\/loader.+\n/g, '')
            .replace(/\s+ text.split('\n').map((t, i) => i + 1),

import {useReducer, useMemo} from 'react';
import {FaCode} from 'react-icons/fa';
import Refractor from 'react-refractor';
import jsx from 'refractor/lang/jsx';
import tsx from 'refractor/lang/tsx';
import bash from 'refractor/lang/bash';
import 'prism-themes/themes/prism-vs.css';
import c from './index.less';

Refractor.registerLanguage(jsx);
Refractor.registerLanguage(tsx);
Refractor.registerLanguage(bash);

const SourceCode = ({className, source, toggle, language}) => {
    const [visible, toggleVisible] = useReducer(v => !v, !toggle);
    const text = useMemo(
        () => source
            .replace('../../../src', 'react-suspense-boundary')
            .replace(/import SourceCode from.+\n/, '')
            .replace(/\/\/ eslint-disable-next-line import\/no-webpack-loader-syntax.+\n/g, '')
            .replace(/import source from '..\/SourceCode\/loader.+\n/g, '')
            .replace(/\s+