Build a React.js Markdown Viewer App to Render Markdown Files Using react-markdown in Browser

App.jsx

import React, { useState } from "react";
import { Container, Row, Col, Form } from "react-bootstrap";
import ReactMarkdown from "react-markdown"; // This is the main library for rendering markdown
import "bootstrap/dist/css/bootstrap.min.css";

// Markdown Previewer App
const App = () => {
  const [markdown, setMarkdown] = useState("");

  const handleMarkdownChange = (event) => {
    setMarkdown(event.target.value);
  };

  return (
    <Container className="my-4">
      <h1 className="text-center">Markdown Previewer</h1>
      <Row>
        {/* Input Area */}
        <Col md={6}>
          <h5>Markdown Input</h5>
          <Form.Control
            as="textarea"
            rows={10}
            value={markdown}
            onChange={handleMarkdownChange}
          />
        </Col>

        {/* Output Area */}
        <Col md={6}>
          <h5>Preview</h5>
          <div className="markdown-preview">
            <ReactMarkdown>{markdown}</ReactMarkdown>
          </div>
        </Col>
      </Row>
    </Container>
  );
};

export default App;

import React, { useState } from "react";

import { Container, Row, Col, Form } from "react-bootstrap";

import ReactMarkdown from "react-markdown"; // This is the main library for rendering markdown

import "bootstrap/dist/css/bootstrap.min.css";

// Markdown Previewer App

const App = () => {

const [markdown, setMarkdown] = useState("");

const handleMarkdownChange = (event) => {

setMarkdown(event.target.value);

};

return (

<h1 className="text-center">Markdown Previewer</h1>

<Row>

{/* Input Area */}

<h5>Markdown Input</h5>

<Form.Control

as="textarea"

rows={10}

value={markdown}

onChange={handleMarkdownChange}

</Col>

{/* Output Area */}

<h5>Preview</h5>

<ReactMarkdown>{markdown}</ReactMarkdown>

</div>

</Col>

</Row>

</Container>

);

};

export default App;

Build a React.js Markdown Viewer App to Render Markdown Files Using react-markdown in Browser

Comments

Leave a Reply Cancel reply

Archives