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:

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:

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

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