# EventrixScope

This provider give you opportunity to use event name scope or state path scope. This is great tool when you need to encapsulate some part of your application. Small example abowe.

{% hint style="info" %}
Scopes doesn't work with receivers it will be added in future.
{% endhint %}

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

```jsx
import React from 'react';
import { useEventrixState, EventrixProvider, Eventrix, EventrixScope } from 'eventrix';

const eventrix = new Eventrix({
    company1: {
        employees:  [{ name: 'Max' }],
    },
    company2: {
        employees: [{ name: 'Jonhy' }],
    },
);

const EmployeeList = () => {
    const [employees] = useEventrixState('employees'); // `${scope}.employees`
    return (
        <div>
            {employees.map(employee => <div>{employee.name}</div>)}
        </div>
    );
}

const Dashboard = () => {
    return (
        <EventrixProvider eventrix={eventrix}>
            <EventrixScope state='company1'>
                <EmployeeList />
            </EventrixScope>
            <EventrixScope state='company2'>
                <EmployeeList />
            </EventrixScope>
        </EventrixProvider>
    )
}
```

{% endtab %}
{% endtabs %}

The same thing you can do with event scope

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

```jsx
import React from 'react';
import { useEventrixState, EventrixProvider, Eventrix, EventrixScope } from 'eventrix';

const eventrix = new Eventrix({});
eventrix.listen('User:create', () => { console.log('create user') })
eventrix.listen('Employee:create', () => { console.log('create employee') })

const CreateButton = () => {
    const emit = useEmit(); // 
    const create = () => { emit('create', { name: 'test' }) } // `${scope}:create`
    return <Button onClick={create}>Create</Button>;
}

const Dashboard = () => {
    return (
        <EventrixProvider eventrix={eventrix}>
            <EventrixScope event='User'>
                <CreateButton />
            </EventrixScope>
            <EventrixScope event='Employee'>
                <CreateButton />
            </EventrixScope>
        </EventrixProvider>
    )
}
```

{% endtab %}
{% endtabs %}