MouseEnterDetect() — react Function Reference

Architecture documentation for the MouseEnterDetect() function in mouse-enter.js from the react codebase.

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ MouseEnterDetect() — react Function Reference

Dependency Diagram

graph TD
  546d9229_6cfb_ddef_b49a_05af977bc1fc["MouseEnterDetect()"]
  f6c1c3c1_f884_99e1_f496_a1fbbe6d96a1["mouse-enter.js"]
  546d9229_6cfb_ddef_b49a_05af977bc1fc -->|defined in| f6c1c3c1_f884_99e1_f496_a1fbbe6d96a1
  style 546d9229_6cfb_ddef_b49a_05af977bc1fc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/mouse-events/mouse-enter.js lines 41–71

const MouseEnterDetect = () => {
  const [log, setLog] = React.useState({});
  const firstEl = React.useRef();
  const siblingEl = React.useRef();

  const onMouseEnter = e => {
    const timeStamp = e.timeStamp;
    setLog(log => {
      const callCount = 1 + (log.timeStamp === timeStamp ? log.callCount : 0);
      return {
        timeStamp,
        callCount,
      };
    });
  };

  return (
    <React.Fragment>
      <div
        ref={firstEl}
        onMouseEnter={onMouseEnter}
        style={{
          border: '1px solid #d9d9d9',
          padding: '20px 20px',
        }}>
        Mouse enter call count: {log.callCount || ''}
      </div>
      <div ref={siblingEl} />
    </React.Fragment>
  );
};