Variable Autosuggest NPM

A React component that provides variable autosuggestion functionality with a rich text editor-like interface. This component allows users to type variables within curly braces {{}} and get intelligent suggestions based on predefined variables.

Features

• 🔍 Real-time variable suggestions as you type
• 🎯 Smart variable detection within curly braces
• 💡 Tooltip display for variable details on hover
• ⌨️ Keyboard navigation support (Arrow Up/Down, Enter)
• 📋 Copy-paste support with variable preservation
• 🎨 Customizable styling
• 📱 Responsive design
• 🔒 Disable mode support

Installation

1npm install env-autosuggest

Usage

1import React, { useRef } from 'react';
2import AutoSuggest from 'variable-autosuggest-npm';
3
4function App() {
5  const contentEditableDivRef = useRef(null);
6  
7  const suggestions = {
8    "apiKey": {
9      "initialValue": "",
10      "currentValue": "",
11      "scope": "Global"
12    },
13    "userToken": {
14      "initialValue": "token12345abcdef",
15      "currentValue": "token67890ghijkl",
16      "scope": "Private"
17    },
18    "apiUrl": {
19      "initialValue": "https://api.example.com",
20      "currentValue": "https://api.tech.com",
21      "scope": "Global"
22    },
23    "username": {
24      "initialValue": "user_one",
25      "currentValue": "user_two",
26      "scope": "Global"
27    },
28    "password": {
29      "initialValue": "pass1234",
30      "currentValue": "securePass5678",
31      "scope": "Private"
32    },
33    "sessionToken": {
34      "initialValue": "sdfg6789asdf1234",
35      "currentValue": "qwerty1234uiop5678",
36      "scope": "Private"
37    }
38  };
39
40  const handleValueChange = () => {
41    // Handle value changes here
42    console.log(contentEditableDivRef.current.innerText);
43  };
44
45  return (
46    <AutoSuggest
47      suggestions={suggestions}
48      contentEditableDivRef={contentEditableDivRef}
49      initial=""
50      handleValueChange={handleValueChange}
51      disable={false}
52      placeholder="Type {{ to see suggestions"
53    />
54  );
55}

Props

Prop	Type	Required	Description
suggestions	Object	Yes	Object containing variable suggestions with their metadata (initialValue, currentValue, scope)
contentEditableDivRef	Ref	Yes	React ref for the content editable div
initial	String	No	Initial content of the editor
handleValueChange	Function	No	Callback function triggered on content change
disable	Boolean	No	Disables the editor when true
placeholder	String	No	Placeholder text when editor is empty

Suggestion Format

The suggestions object should follow this structure:

1{
2  "variableName": {
3    "initialValue": string,    // Original/default value
4    "currentValue": string,    // Current/modified value
5    "scope": string           // Scope of the variable (e.g., "Global", "Private")
6  }
7}

Example Suggestion Object

1{
2  "apiKey": {
3    "initialValue": "",
4    "currentValue": "",
5    "scope": "Global"
6  },
7  "userToken": {
8    "initialValue": "token12345abcdef",
9    "currentValue": "token67890ghijkl",
10    "scope": "Private"
11  }
12}

Features in Detail

Variable Suggestions

• Type {{ to trigger suggestions
• Use arrow keys to navigate through suggestions
• Press Enter to select a suggestion
• Suggestions are filtered based on what you type after {{
• Each suggestion shows its scope and current value in the tooltip

Variable Display

• Variables are displayed within curly braces
• Hover over variables to see their details in a tooltip
• Variables are preserved during copy-paste operations
• Tooltip shows:
  • Variable name
  • Current value
  • Initial value
  • Scope

Keyboard Navigation

• ↑ (Arrow Up): Navigate to previous suggestion
• ↓ (Arrow Down): Navigate to next suggestion
• Enter: Select current suggestion
• Type to filter suggestions

Styling

The component comes with default styles but can be customized using CSS classes:

• .parent-div: Main container
• .main__div: Editor container
• .__custom-autosuggest-block__: Content editable area
• .placeholder-editable-div: Placeholder container
• .disable-div: Applied when editor is disabled
• .__suggestions__container__: Suggestions dropdown container
• .suggestion-item-div: Individual suggestion item
• .__main__suggestion__container__: Main suggestions list container

Author

👨‍💻 Idris Bohra

• LinkedIn: idris-bohra
• GitHub: idris-bohra

Feel free to connect with me for any questions, suggestions, or collaboration opportunities!

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT