## Usage
### Component Factory
```tsx
import React from 'React'
import { defineComponent, ref, computed, onUnmounted } from 'reactivue'
interface Props {
value: number
}
const MyCounter = defineComponent(
// setup function in Vue
(props: Props) => {
const counter = ref(props.value)
const doubled = computed(() => counter.value * 2)
const inc = () => counter.value += 1
onUnmounted(() => console.log('Goodbye World'))
return { counter, doubled, inc }
},
// functional component in React
({ counter, doubled, inc }) => {
// you can still use other React hooks
return (
{counter} x 2 = {doubled}
)
}
)
// use it as you normally would
render(, el)
```
### Hooks
You can use it as a hook as well.
> The `defineComponent` factory is actually a sugar to and equivalent to the following code.
```tsx
import React from 'React'
import { useSetup, ref, computed, onUnmounted } from 'reactivue'
interface Props {
value: number
}
function MyCounter(Props: Props) {
const state = useSetup(
(props: Props) => { // props is a reactive object in Vue
const counter = ref(props.value)
const doubled = computed(() => counter.value * 2)
const inc = () => counter.value += 1
onUnmounted(() => console.log('Goodbye World'))
return { counter, doubled, inc }
},
Props // pass React props to it
)
// state is a plain object just like React state
const { counter, doubled, inc } = state
return (
{counter} x 2 = {doubled}
)
}
```
### Hook Factory
To reuse the composition logics, `createSetup` is provided as a factory to create your own hooks.
```ts
// mySetup.ts
import { createSetup, ref, computed, onUnmounted } from 'reactivue'
export interface Props {
value: number
}
// create a custom hook that can be reused
export const useMySetup = createSetup(
(props: Props) => {
const counter = ref(props.value)
const doubled = computed(() => counter.value * 2)
const inc = () => counter.value += 1
onUnmounted(() => console.log('Goodbye World'))
return { counter, doubled, inc }
},
)
```
```tsx
// Counter.tsx
import React from 'react'
import { useMySetup, Props } from './mySetup'
export const Counter = (props: Props) => {
const { counter, doubled, inc } = useMySetup(props)
const { counter: counter2, doubled: doubled2, inc: inc2 } = useMySetup({ value: 10 })
return (
