> For the complete documentation index, see [llms.txt](https://melody-js.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://melody-js.gitbook.io/docs/melody-streams-api/createcomponent.md).

# createComponent

## Description

The `createComponent` function is used merge a [component function](/docs/melody-streams-api/the-component-function.md) and a template into a Melody Component. The component function must match the `melody-streams` API.

## Usage

```javascript
import { createComponent } from 'melody-streams';
import ButtonTemplate from './Button.twig';

function Button({ props }) {
    return props;
}

export default createComponent(Button, ButtonTemplate);
```

## Partial application

Instead of directly providing both the component function and the template, it is possible to create a component in two steps by first providing the component function and then applying the returned function to a template.

This is particularly useful when you would like to conditionally enable a different UI for a component, for example because you're running an A/B test.

```javascript
import { createComponent } from 'melody-streams';
import BlueButton from './BlueButton.twig';
import RedButton from './RedButton.twig';
import { hasTreatment } from '@mycomp/experiments';

function Button({ props }) {
    return props;
}

const ButtonLike = createComponent(Button);
const Button = hasTreatment('red-button') ? ButtonLike(RedButton) : ButtonLike(BlueButton);

export default Button;
```

This approach can also be useful when different components share the same behaviour. For example, a Checkbox and a ToggleButton might look very different but their behaviour is almost identical when it comes to state (can be toggled, has a selected state, etc.).