your recipe card header background

    useCodeMirror

    0

    0

    oscarsala

    code-editor

    This hooks lets you use CodeMirror 6 in any react component.

    Library: react

    import React, { useCallback, useEffect, useState } from "react";
    import { EditorState, EditorView, basicSetup } from"@codemirror/basic-setup";
    import { Extension } from "@codemirror/state";
    import { javascript } from "@codemirror/lang-javascript";
    
    export default function useCodeMirror(extensions: Extension[]) {
      const [element, setElement] = useState<HTMLElement>();
    
      const ref = useCallback((node: HTMLElement | null) => {
        if (!node) return;
    
        setElement(node);
      }, []);
    
      useEffect(() => {
        if (!element) return;
    
        const view = new EditorView({
          state: EditorState.create({
            extensions: [
              basicSetup,
              javascript(),
              ...extensions
            ]
          }),
          parent: element
        });
    
        return () => view?.destroy();
      }, [element]);
    
      return { ref };
    }
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Explore
    • Cookbooks
    • Playground
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.