# wix-design-systems-masking-providers

A common providers library used within the `wix-design-systems` packages.

## WixDesignSystemsMaskingProvider

This provider is a wrapper component that is used for masking components when recording users interactions. The classname attached to the components will act as a hook for third party services to detect where to mask.

## Usage

First, you should connect context consumer to the components you would like to mask when provider is used:

```javascript
import { WixDesignSystemsMaskingContext } from 'wix-design-systems-providers';

export const MyComponent = () => (
  <WixDesignSystemsMaskingContext.Consumer>
    {({ maskingClassNames }) => <p className={maskingClassNames} />}
  </WixDesignSystemsMaskingContext.Consumer>
);
```

Then, you can wrap the above component with `WixDesignSystemsMaskingProvider` which will enable the masking feature:

```javascript
import { WixDesignSystemsMaskingProvider } from 'wix-design-systems-providers';

<WixDesignSystemsMaskingProvider>
  <MyComponent />
</WixDesignSystemsMaskingProvider>;
```