# Implementing the Reading Mask

## Installation
To integrate the Reading Mask feature into your project, install the necessary package using npm:

```sh
npm install @zohodesk/a11y
```

## Importing the Component
After installation, import the `ReadingMask` component into your project:

```javascript
import { ReadingMask } from '@zohodesk/a11y';
```

## Configuration
Customize the `ReadingMask` component using the `uiConfig` object.

```javascript
const uiConfig = {
  dimensions: {
    height: 25,
    width: 100,
  },
  appearance: {
    opacity: 1,
  },
  getRootElement : () => {}
};
```

## Usage
Implement the `ReadingMask` component in your application and pass the `uiConfig` as a prop.
`getRootElement` is Required , here this function refered as a target container element.

```javascript
function App() {
  return (
    <div>
      <ReadingMask uiConfig={uiConfig} />
    </div>
  );
}

export default App;
```

## For Implementing in IFrame

```javascript
import { ReadingMaskEventManager } from '@zohodesk/a11y'

const readingMaskEventManager = new ReadingMaskEventManager();

function IFrameOnMount() {
  readingMaskEventManager.addMouseMoveListener(iframeElement)
}

function IFrameOnUnMount() {
  readingMaskEventManager.removeMouseMoveListener(iframeElement)
}
```

## PropTypes Definition
Ensure type safety by defining prop types for `ReadingMask`:

```javascript
import PropTypes from 'prop-types';

ReadingMask.propTypes = {
  uiConfig: PropTypes.shape({
    dimensions: PropTypes.shape({
      height: PropTypes.number,
      width: PropTypes.number,
    }),
    appearance: PropTypes.shape({
      opacity: PropTypes.number,
    }),
    getRootElement : PropTypes.node.function
  }),
};
```



## Conclusion
By following these steps, you can successfully integrate the Reading Mask into your application, enhancing accessibility and user experience. Adjust the configuration options as needed to fit your specific requirements.