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;

License

MIT © miguellealw