React No-Code Smart Input

A React component for creating a smart input field that allows users to reference nested data structures without writing code. The input validates against a provided data object and returns the current value along with its validation status.

Installation

Install the component in your React project:

npm install react-no-code-smart-input

Or with Yarn:

yarn add react-no-code-smart-input

Usage Example

import React, { useState } from "react";
import { ReactNoCodeSmartInput } from "react-no-code-smart-input"; 

export default function App() {
  const [value, setValue] = useState("");
  const [isValid, setIsValid] = useState(true);

  const sampleData = {
    user: {
      name: { first: "John", last: "Doe" },
      age: 30,
      address: { city: "New York", zip: "10001" },
    },
    settings: { theme: "dark", notifications: true },
  };

  // Callback to get validation status and current input
  const handleResults = (valid, currentValue) => {
    setIsValid(valid);
    setValue(currentValue);
  };

  return (
    <div style={{ padding: "50px" }}>
      <h2>Smart Input Example</h2>
      <ReactNoCodeSmartInput
        data={sampleData}
        defaultValue="user.name"
        results={handleResults}
      />

      <div style={{ marginTop: "20px" }}>
        <strong>Current Input:</strong> {value}
        <br />
        <strong>Is Valid:</strong> {isValid ? "Yes" : "No"}
      </div>
    </div>
  );
}

Props

| Prop | Type | Description | | -------------- | -------- | --------------------------------------------------------------------- | | data | object | The data object to reference for validation | | defaultValue | string | Default input value | | results | function | Callback function receiving validation status and current input value |