cross-framework-define-component

App

import { ReactDefineComponent, ref } from 'cross-framework-define-component'
import Button from './Button'

export default ReactDefineComponent(() => {
  const loading = ref(false)
  const onClick = () => {
    loading.value = true
    setTimeout(() => {
      loading.value = false
    }, 3000)
  }

  return () =>
    <Button loading={loading.value} onClick={onClick} />
})

Button

import { ReactDefineComponent } from 'cross-framework-define-component'

export default ReactDefineComponent<{loading?: boolean, onClick?: React.MouseEventHandler<HTMLButtonElement>}>((props) => {
  return () => {
    const { loading = false, onClick = () => {} } = props
    return <button
      disabled={loading}
      onClick={onClick}
    >
      i'm {loading ? 'loading' : 'button'}
    </button>
  }
})

Reproduction