Function FormKitImpl

packages/react/src/FormKit.ts:177–268

(
  props: FormKitComponentProps<Props>,
  ref: Ref<FormKitNode | undefined>
)

}

function FormKitImpl<Props extends FormKitInputs<Props>>(
  props: FormKitComponentProps<Props>,
  ref: Ref<FormKitNode | undefined>
): ReactElement | null {
  const slots = useStableSlots(props.children, props.slots)

  const node = useInput({ ...props, slots } as any)

  if (!node.props.definition) error(600, node)

  useImperativeHandle(ref, () => node, [node])

  useEffect(() => {
    if (typeof props.onNode === 'function') {
      props.onNode(node)
    }
  }, [node, props.onNode])

  useReactiveStore(node.props.definition.component ? node.context : undefined)

  if (node.props.definition.component) {
    return createElement(node.props.definition.component as any, {
      context: node.context,
      slots,
    })
  }

  const [schema, setSchema] = useState<FormKitSchemaDefinition>(
    () => resolveSchemaState(node, props.sectionsSchema).schema
  )
  const [memoKey, setMemoKey] = useState<string | undefined>(
    () => resolveSchemaState(node, props.sectionsSchema).memoKey
  )

  const generateSchema = useCallback(() => {
    const nextState = resolveSchemaState(node, props.sectionsSchema)
    setSchema(nextState.schema)
    setMemoKey((existing) =>
      existing === nextState.memoKey ? existing : nextState.memoKey
    )
  }, [node, props.sectionsSchema])

  useEffect(() => {
    generateSchema()
  }, [generateSchema])

  useEffect(() => {
    const receipt = node.on('schema', () => {
      setMemoKey((existing) => `${existing || ''}♻️`)
      generateSchema()
    })
    return () => {
      node.off(receipt)
    }
  }, [generateSchema, node])

  useEffect(() => {
    node.emit('mounted')