Use-stackedit NPM

use-stackedit

StackEdit hook for react. Provides onFileChange, openStackedit, and onClose events.

useStackEdit(setValue, opts = {})
onFileChange(file => {}) - event fired when user types in StackEdit editor.
- Automatically updates the textarea value state
openStackedit({}) - event to open editor
onClose() - event to forcefully close editor

Install

npm install --save use-stackedit

Usage

CodeSandbox Example

import React, { useState } from "react";
import { useStackEdit } from "use-stackedit";

const App = () => {
  const [value, setValue] = useState("");
  const { openStackedit, onFileChange } = useStackEdit(setValue);
  return (
    <div>
      <textarea
        value={value}
        onChange={(e) => {
          setValue(e.target.value);

          // If textarea is edited run the file change event on stackedit
          onFileChange();
        }}
      ></textarea>

      <button
        onClick={() => {
          openStackedit({
            content: {
              // Markdown content.
              text: value,
            },
          });
        }}
      >
        Open Editor
      </button>
    </div>
  );
};
export default App;