# MobX Adapter

MobX simplifies reactive state management, allowing you to create observable states and actions. Ignite-Element’s MobX adapter works seamlessly with MobX observables, enabling your components to react to state changes dynamically.

***

#### **Define a MobX Store with TypeScript Support**

Here’s a counter implementation using MobX:

{% tabs %}
{% tab title="TypeScript" %}

```typescript
import { action, observable, makeObservable } from "mobx";

class Counter {
  @observable count = 0;

  constructor() {
    makeObservable(this);
  }

  @action increment() {
    this.count += 1;
  }

  @action decrement() {
    this.count -= 1;
  }
}

// Use a factory function to create a fresh instance
const counterStore = () => new Counter();

export default counterStore;
```

{% endtab %}
{% endtabs %}

**Note**: MobX uses decorators for its `@observable` and `@action` annotations. Make sure you have decorators enabled in your TypeScript configuration.\
**Learn More**: Visit the [MobX documentation on enabling decorators](https://mobx.js.org/enabling-decorators.html).

***

#### **Plug into Ignite-Element**

Pass the factory function directly to `igniteCore`:

{% tabs %}
{% tab title="TypeScript" %}

```typescript
import { igniteCore } from "ignite-element";
import counterStore from "./counterStore";

const igniteElement = igniteCore({
  adapter: "mobx",
  source: counterStore, // Pass the factory function
});
```

{% endtab %}
{% endtabs %}
