DynamicInput

Dynamic Input

Basic Usage

import {useState} from "react";
import {DynamicInput, dynamicFormRef} from "dynamicformdjx-react";

function App() {
    const [obj, setObj] = useState<Record<string, any>>({
        a: 'Hello world',
        b: 1314,
        c: [5, 2, 0]
    });
    const dynamicInputRef = useRef<dynamicFormRef>(null)
    return (<div>
        <DynamicInput ref={dynamicInputRef} isController value={obj} onChange={(e) => setObj(e)}/>
        <pre>
            {JSON.stringify(obj, null, 2)}
        </pre>
        <div>
            <button onClick={() => {
                dynamicInputRef.current?.onSet?.({
                    test: 'hello World'
                })
            }}>setData
            </button>
        </div>
    </div>)
}

export default App

Preview Demo

API

Prop definitions and exposed methods are consistent with the Vue 3 version

Only value and onChange are required. Other parameters remain the same.

Props

Name	Description	Type	Default	Required
value	The form model value passed from the parent component and kept in sync (replaces modelValue)	object	-	✅

Go to v3 Props

Function

Name	Description	Callback Params	Required
onChange	Triggered when the form value changes, returns the updated model value (replaces update:modelValue)	(value: object)	✅

Go to v3 Emits

Ref

Go to v3 Expose