[feat] add new Hook: useDevicePixelRatio with tests & stories

[erfankorki]

Description

a new Hook added to detect initial devicePixelRatio on window object and update the value everytime user zooms in or zooms out the screen

Type of change

• Bug fix (non-breaking change which fixes an issue)
• [*] New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as before)

Checklist

• [*] Read the Contributing Guide
• [*] Perform a code self-review
• [*] Comment the code, particularly in hard-to-understand areas
• [*] Add documentation
• [*] Add hook's story at Storybook
• [*] Cover changes with tests
• [*] Ensure the test suite passes (yarn test)
• [*] Provide 100% tests coverage
• [*] Make sure code lints (yarn lint). Fix it with yarn lint:fix in case of failure.
• [*] Make sure types are fine (yarn lint:types).

[zardoy]

This is so cool, but does it have any real-case scenarios?

[erfankorki]

I can think of a few:

1. we can use it to serve different qualities of images or videos for optimization/performance (e.g: substitute src attribute) based on deviePixelRatio
2. for WebGL projects and features that require Canvas we can adjust height and width of Canvas based on output of this hook dynamically.
3. it can be used alongside media queries to achieve better responsive design.

[zardoy]

For 1. and 3. I believe you should use instead css media queries directly in you css solution. For webgl it's not clear… most probably you want to use it in imperative way. If you mean to use it alongside react three fiber you might want to it to their set of hooks instead.