react-simple-code-hint v0.1.0

react-simple-code-hint

A wrapper for react-simple-code-editor that adds code hints.

Try the Editor

Usage

To use react-simple-code-hint, follow these steps:

1. Install the package:

   npm install react-simple-code-hint

   or

   yarn add react-simple-code-hint

2. Import the necessary modules:

   import React, { useState } from "react";
   import Editor from "react-simple-code-editor";
   import Hint from "react-simple-code-hint";
   import { highlight, languages } from "prismjs";
   import "prismjs/components/prism-javascript";
   // ...other prismjs syntax imports

3. Wrap the Editor component with the Hint component:

   const MyCodeEditor = () => {
     const [code, setCode] = useState("");
   
     return (
       <Hint hints={["hint1", "hint2", "other_hints"]}>
         <Editor
           placeholder="Type some code…"
           value={code}
           onValueChange={(code) => setCode(code)}
           highlight={(code) => highlight(code, languages.jsx!, "jsx")}
           padding={10}
           style={{
             fontFamily: '"Fira code", "Fira Mono", monospace',
             fontSize: 12,
           }}
         />
       </Hint>
     );
   };
   
   export default MyCodeEditor;

4. Render your component:

   import React from "react";
   import { createRoot } from "react-dom/client";
   import MyCodeEditor from "./MyCodeEditor";
   
   const container = document.getElementById("root");
   const root = createRoot(container!);
   
   root.render(<MyCodeEditor />);

This setup will provide a code editor with customizable code hints.

Hint Component Properties

The Hint component provides the following properties:

• children: React.ReactNode (required)

  • The child component to be wrapped by the Hint component. This should be an Editor component from the react-simple-code-editor package.

• hints: string[] (required)

  • An array of strings representing the hints to be displayed.

• styles: object (optional)

  • An object representing the inline styles to be applied to various parts of the hint component. It includes:
    • Container: CSSProperties
      • Styles for the container that holds the hints.
    • Hint: CSSProperties
      • Styles for each individual hint.
    • SelectedHint: CSSProperties
      • Styles for the currently selected hint.
    • Root: CSSProperties
      • Styles for the root wrapper of the hint and editor components and normally does not need to be styled by the user.