Dynamic Commands

Dynamic commands in magic-input allow inputs to adapt and update automatically based on user interactions. These commands refresh each time the user interacts with the input, ensuring that the most relevant data is always displayed.

Dynamic commands are commands that can be called later. For example, suppose you have a movie site and you want to add the average imdb of the movies in the list to your users' lists with your special command for the title and it should be updated when each movie is added. For example, let's say our command is [AverageImdb()]. The user entered [AverageImdb()] Imdb Amazing in the title and you saved it to the database. Then, after making the magic adjustments, this command is run every time a movie is added to the dynamic structure field and it presents the current imdb average to the user.

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 magicItems: MagicItem[] = [
  {
    keys: [
      {
        name: "message",
        parameters: [],
        fn: (params, context) => {
          if (context.value.length > 0) {
            // console.log(params, context);
          }
 
          if (params.length == 2) {
            return `${context.parameters?.parameters[1]}`;
          }
          return "error";
        },
        type: "dynamic",
      },
    ],
  },
];
 
const executeMagic = useMagic(magicItems, text); // here `text` part is the text stored with the command example `hello [username()]` etc.
const result = executeMagic();
 
const {
  value,
  result, //  Indicates the output after the command is executed.
  regexMatched, // Is there regex compatibility or not?
  functionName,
  parameters,
  additionalInfo,
} = result;

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: "CustomGreeting",
        regex: /\/hello/g,
        fn: (context) => {
          if (context.regexMatched) {
            setOutput(`Custom greeting: ${context.value}`);
          }
        },
        type: "dynamic",
        parameters: false,
        dynamicFunc: false,
      },
    ],
  },
];
 
const executeMagic = useMagic(magicItems, text); // here `text` part is the text stored with the command example `Say /hello` etc.
const result = executeMagic();
 
const {
  value,
  result, //  Indicates the output after the command is executed.
  regexMatched, // Is there regex compatibility or not?
  functionName,
  parameters,
  additionalInfo,
} = result;

In this example:

• CustomGreeting: A custom command that triggers when the input matches the /hello pattern.

Summary:

• Keys: Ideal for fixed, pre-defined command structures with or without parameters.
• Custom: Best for creating highly customizable commands using regex to match and process complex input patterns.

These structures give you the flexibility to build user-friendly inputs that cater to a wide range of use cases in your React applications.