> For the complete documentation index, see [llms.txt](https://kutlugsahin.gitbook.io/re-active/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kutlugsahin.gitbook.io/re-active/reactive-components-api.md).

# Reactive Components

## component() with Reactive component definition

Takes a function accepting props type P (reactive props) which is deeply unboxed, returning a function that returns a ReactElement or null.

<pre class="language-typescript"><code class="lang-typescript">type ReactiveProps&#x3C;P> = { [key in keyof P]: P[key] | Ref&#x3C;P[key]> };

<strong>type ReactiveComponent&#x3C;P> = 
</strong>  (props: UnwrapNestedRefs&#x3C;ReactiveProps&#x3C;P>>) => () => ReactElement&#x3C;any, any> | null;

function component&#x3C;Props>(componentSetup: ReactiveComponent&#x3C;Props>)
: FC&#x3C;ReactiveProps&#x3C;Props>>;
</code></pre>

#### Example

```typescript
interface Props {
    id: string;
    data: string;
}

const MyComp = component((props: Props) => {
    return () => <div>{props.id} {props.data}</div>
})


const Container = component(() => {
    const myCompId: string = 1;
    const myCompData = ref('some data');
    return () => (
    // notice id and data are declared as strings 
    // but we can pass them as strings or a ref<string>
        <MyComp id={myCompId} data={myCompData}/>
    )
})
```

### Lifecycles

#### onMounted()

Called when the component is mounted. Accepts a handler function which returns either void or a Disposer function. Disposer function is called when component is unmounted.

```typescript
type Disposer = () => void;

onMounted(handler: () => (void | Disposer))
```

#### onUnmounted()

Called when the component is unmounted. Accepts a handler function that returns void

```typescript
onUnmounted(handler: () => void);
```

### Context API

#### consumeContext()

```typescript
function consumeContext<T>(context: Context<T>): Ref<T>
```

## component.withHandle()

Same as *forwardRef.* Ref prop will be passed to component alongside with props.

```typescript
export type ReactiveComponentWithHandle<P, H> = 
  (props: UnwrapNestedRefs<ReactiveProps<P>>, ref: React.Ref<H>) => Renderer;
  
component.withHandle = 
  function <Props, Handle>(component: ReactiveComponentWithHandle<Props, Handle>)
```

### imperativeHandle()

Used to define the content of the forwarded Ref. Similar to *useImperativeHandle.* Takes two parameters. First is the ref to populate second is the object to set the ref value.

```typescript
const Input = component.withHandle((props, ref) => {

    // we can keep a reference to input element simple as this
    // React.createRef() can be used as well;
    let input;

    imperativeHandle({
        focus() {
            input.focus();
        }
    });

    return () => <input ref={r => input = r} />;
});
```

## component() with functional component

A higher order component which accepts functional component and produces a component that reacts to reactive data.

```typescript
function component<Props>(component: FC<UnwrapNestedRefs<ReactiveProps<Props>>>)
  : FC<ReactiveProps<Props>>;
```

## ReactiveBoundary

Built-in component receiving a render function as children. Used to make some piece of rendered nodes reactive without extracting it as a component. It has an optional "data" property to be passed to the render function.

```typescript
function ReactiveBoundaryComponent<T>(
  props: { data: T; children: (data: T) => RenderResult }
)
```