Advertisement
Guest User

Untitled

a guest
Sep 23rd, 2019
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.22 KB | None | 0 0
  1. import React, { useRef, useState, useEffect } from 'react';
  2. import PropTypes from 'prop-types';
  3.  
  4. const ReactDims = React.createContext(null);
  5.  
  6. export const Provider = (props)=>{
  7. const domNode = useRef(null);
  8. const [dimensions, setDimensions] = useState({});
  9. const [timeoutID, newTimeoutID] = useState(null);
  10.  
  11. useEffect(()=>{
  12. setDimensions(domNode.current.getBoundingClientRect());
  13. },[]);
  14.  
  15. useEffect(()=>{
  16. window.addEventListener('resize', getNodeDimensions);
  17. return ()=>{ window.removeEventListener('resize', getNodeDimensions)};
  18. }, []);
  19.  
  20. const getNodeDimensions = ()=>{
  21. clearTimeout(timeoutID);
  22. newTimeoutID(setTimeout(()=>{
  23. setDimensions(domNode.current.getBoundingClientRect());
  24. }, props.debounce)
  25. );
  26. };
  27.  
  28. return (
  29. <div ref={domNode} style={{height: '100%'}}>
  30. <ReactDims.Provider value={dimensions}>
  31. {props.children}
  32. </ReactDims.Provider>
  33. </div>
  34. )
  35. };
  36.  
  37. Provider.propTypes = {
  38. debounce: PropTypes.number
  39. }
  40.  
  41. Provider.defaultProps = {
  42. debounce: 100
  43. }
  44.  
  45. export const withContext=(ChildComponent)=>{
  46. return (props)=>(
  47. <ReactDims.Consumer>
  48. {(incomingDims)=>(<ChildComponent {...props} dims={incomingDims} />)}
  49. </ReactDims.Consumer>
  50. )
  51. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement