React Wire basic concepts

In this post, we will cover the @forminator/react-wire basic concepts.

Wire

A wire is an object that contained a value inside it.

Create a new wire

The userWire hook, returns a new wire.

const wire = useWire(null, initialValue)

Or you can connect the wire to another wire, called an up-link wire. The value of both wires will be synced all the time.

const wire = useWire(anotherWire)

Reading the wire value

The useWireValue returns the current value of the wire, and rerender component when the wire value changed.

const value = useWireValue(wire)

Changing wire value

The useWireState returns value and setValue. exactly same as default useState.

const [value, setValue] = useWireState(null, initialValue)

You can also pass a wire to the first argument, and the returned value will be synced with the wire.

const [value, setValue] = useWireState(wire, initialValue)