Is there a way to pass different props to a component according to the current viewport size? 

I know you can get the current height and width using 

```
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

```

Image between 1440px and 1000px I have send some data to a component, and when it viewport shrinks below 1000px and above 768px I need to send another set of data to that component. How can I achieve this functionality in React?