SHARE
TWEET

Untitled

a guest Sep 17th, 2019 88 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2. import withMouse from './withMouseHoc';
  3. import Mouse from './MouseRenderProps';
  4.  
  5. const containerStyle = {
  6.   fontSize: '15px',
  7.   textAlign: 'center',
  8.   border: '2px solid red',
  9.   width: '200px',
  10.   height: '200px'
  11. };
  12.  
  13. const AppHoc = props => {
  14.   return (
  15.     <div>
  16.       <div style={containerStyle} onMouseMove={props.handleMouseMove}>
  17.         coordinate locator
  18.       </div>
  19.       <span>the coordinates are {`X:${props.x} Y:${props.y}`}</span>
  20.     </div>
  21.   );
  22. };
  23. //this will expose the HOC wrapped component
  24. //export default withMouse(AppHoc);
  25.  
  26. const AppRndrProp = props => {
  27.   return (
  28.     <div>
  29.       <Mouse>
  30.         {(mouseProps, handleMouseMove) => (
  31.           <div>
  32.             <div style={containerStyle} onMouseMove={handleMouseMove}>
  33.               coordinate locator
  34.             </div>
  35.             <span>the coordinates are {`X:${mouseProps.x} Y:${mouseProps.y}`}</span>
  36.           </div>
  37.         )}
  38.       </Mouse>
  39.     </div>
  40.   );
  41. };
  42. //this will expose the render props component
  43. export default AppRndrProp;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top