Smart Variable Input

Smart Variable Input is a flexible and powerful React component that provides an enhanced input field with support for dynamic variables. It features syntax highlighting and autocompletion for variables, making it ideal for templating, configuration editors, or any application where users need to work with placeholders.

Features

• Variable Highlighting: Automatically highlights recognized variables within the input text.
• Autocomplete Suggestions: Offers an intuitive autocomplete dropdown for available variables as the user types.
• Dynamic Variable Extraction: Can identify and extract variables directly from the input text.
• Customizable: Easily customize the appearance of highlighted variables using CSS classes.
• Built with CodeMirror: Leverages the power and extensibility of CodeMirror 6 for a robust editing experience.

Installation

To install the component in your project, run the following command:

bun install smart-variable-input

Or using npm or yarn:

npm install smart-variable-input
yarn add smart-variable-input

Usage

Here's a basic example of how to integrate SmartVariableInput into your React application.

import { useState } from "react";
import { SmartVariableInput } from "smart-variable-input";
import type { Variable } from "smart-variable-input/dist/types";

const App = () => {
  const [value, setValue] = useState(
    "Hello, this is a message for {{user_id}}.",
  );

  const availableVariables: Variable[] = [
    { id: "1", display: "user_id", type: "env" },
    { id: "2", display: "user_name", type: "general" },
    { id: "3", display: "api_key", type: "credentials" },
  ];

  return (
    <div>
      <h1>Smart Input Demo</h1>
      <SmartVariableInput
        value={value}
        onChange={setValue}
        variables={availableVariables}
        placeholder="Enter text with variables..."
      />
    </div>
  );
};

export default App;

Props

The SmartVariableInput component accepts the following props:

| Prop | Type | Description | Default | | -------------------- | ---------------------------------- | --------------------------------------------------------------------------- | ----------- | | value | string | The current value of the input field. | "" | | onChange | (value: string) => void | Callback function that is triggered when the content of the input changes. | undefined | | variables | Variable[] | An array of Variable objects to be used for highlighting and autocompletion. | [] | | placeholder | string | The placeholder text to display when the input is empty. | "" | | classNameHighlight | string | An optional CSS class to apply to highlighted variables for custom styling. | "" |

Variable Type

The Variable object has the following structure:

interface Variable {
  id: string;
  display: string;
  type: "input" | "env" | "credentials" | "general";
  description?: string;
}

Contributing

For instructions on how to set up the local development environment and contribute to the project, please see the CONTRIBUTING.md file.