Integrate into a react project

[smotched]

Thanks for osing this neat library, is there a guide to integrating ink into an existing react project?

[davidmyersdev]

@smotched I'm glad you like it! I've been meaning to put together a React component, but I haven't prioritized it yet since I primarily work in Vue. I'll try to get an example together for you soon.

[phylor]

Something like the following might get you started:

import { defineOptions, ink, Instance } from "ink-mde"
import { useEffect, useRef, useState } from "react"

type Props = {
  content: string | null
  onChange: (content: string) => void
  readonly: boolean
}

const MarkdownEditor = ({ content, onChange, readonly }: Props) => {
  const ref = useRef<HTMLDivElement | null>(null)
  const [editor, setEditor] = useState<Instance | null>(null)
  const options = defineOptions({
    doc: content || undefined,
    hooks: {
      afterUpdate: onChange,
    },
    interface: {
      readonly,
    },
  })

  useEffect(() => {
    if (ref.current && ref.current.children.length <= 0) {
      const editor = ink(ref.current, options)
      setEditor(editor)
    }
  }, [ref])

  useEffect(() => {
    if (editor) {
      editor.reconfigure(options)
    }
  }, [readonly])

  return <div ref={ref}></div>
}

export default MarkdownEditor

[davidmyersdev]

Thanks for the example, @phylor!

[kadhirr]

Hey @davidmyersdev , I have created a react project using ink-mde and the code by @phylor . Please check it, and if it seems fit, you can add it to the project for reference. Here is the link: https://monumental-dango.netlify.app/ Source Code: Github Repo

This is my first open-source contribution, so let me know if I need to change any procedures for better convenience.