App.tsx

import React, { useState } from 'react';
import GitHubCorners from '@uiw/react-github-corners';
import Github from '@uiw/react-shields/esm/github';
import Npm from '@uiw/react-shields/esm/npm';
import logo from './logo.svg';
import './App.css';
import MarkdownPreview, { MarkdownPreviewRef } from '../';
import MDStr from '../README.md';

let val = 1;

const App = () => {
  const [value, setValue] = useState('');
  const ref = React.createRef<MarkdownPreviewRef>();
  return (
    <div className="App">
      <GitHubCorners zIndex={9999} fixed target="__blank" href="https://github.com/uiwjs/react-markdown-preview" />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <a href="https://github.com/uiwjs/react-markdown-preview" target="_blank" rel="noopener noreferrer">
          React Markdown Preview
        </a>
        <p>
          React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub
          Markdown style.
        </p>
      </header>
      <div className="App-editor">
        <button onClick={() => setValue('# Markdown ' + val++)}>set value</button>

        <textarea
          placeholder="Please enter the Markdown code!"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
        <MarkdownPreview ref={ref} className="App-editor-preview" source={value} />
      </div>
      <MarkdownPreview className="App-markdown" source={MDStr.replace(/([\s\S]*)<!--dividing-->/, '')} />
      <div className="App-footer">
        <Github user="uiwjs" repo="react-markdown-preview">
          <Github.Social type="forks" href="https://github.com/uiwjs/react-markdown-preview" />
          <Github.Social type="stars" href="https://github.com/uiwjs/react-markdown-preview/stargazers" />
          <Github.Social type="watchers" href="https://github.com/uiwjs/react-markdown-preview/watchers" />
        </Github>
        <Npm.Version
          scope="@uiw"
          packageName="react-markdown-preview"
          href="https://www.npmjs.com/package/@uiw/react-markdown-preview"
        />
      </div>
    </div>
  );
};

export default App;