Structure

Usage Examples and Explanations of Components and Props

Component Structure:

<MagicInput
  textareaRef={textareaRef} // To use react ref structure (inputRef)
  type="textarea" // determines the type of the associated HTML object (input or textarea)
  value={inputValue} // you know :)
  handleInputChange={setInputValue} // change of entered value type[(value: string) => void]
  magic={magic} // It is the most important structure, commands and functions are set in this object
/>

Props Structure:

Keys:

The keys structure is designed for defining fixed command patterns. These commands can include parameters and are pre-configured to perform specific actions when invoked. For example:

 const magic: MagicItem[] = [
    {
      keys: [
        {
          name: "FuncName", // Custom command name. this result -> [FuncName()]
          parameters: [], // Allows you to set Predefined Parameters
          fn: (params, context) => {  // Command to be run at user input
            if (context.value.length > 0) { 
              setInputValue(context.value);
              setParameters(params);
              setFunctionName(context.functionName || "");
            }
          },
          type: "static", // It can be static or dynamic and determines the type of command.
        },
      ],
    }
  ];

Custom:

The custom structure allows for more advanced and flexible command definitions. Using regex, you can define multiple command patterns and fully customize their behavior. This structure is ideal when you need to create dynamic and complex input handling scenarios.

 const magic: MagicItem[] = [
    {
      custom: [
        {
          functionName: "The Custom Function", // the custom function name
          regex: /\//g, // Set this regex pattern according to what you want to set the function to in the user input
          fn: (context) => {
            if (context.regexMatched) {
              setSearchTab(true);
              if (context.disabled) setSearchTab(false);
              setOutput(context.value);
 
              if (context.parameters) {
                if (context.parameters.functionName === "function") {
                  context.value = "Hello";
                }
                setParameters(context.parameters.parameters);
                setFunctionName(context.parameters.functionName);
              }
            } else {
              setSearchTab(false);
            }
          },
          type: "static",  // It can be static or dynamic and determines the type of command.
          parameters: false,  // Will there be a parameter structure or not?
          dynamicFunc: false,  // The explanation is explained in detail below. 
        },
      ],
    },
  ];

Command Triggering on User Input (dynamicFunc):

This command activates when it detects a specific pattern or keyword anywhere within the user's input. Unlike other commands that might require precise placement or formatting, this command scans the entire input field. Once the pattern is recognized, the associated function is executed, regardless of where the keyword or pattern is located in the input string. This allows for more flexible user interactions, ensuring the command is triggered as long as the criteria are met within the input.

Static Commands