Olova $ref Hook: Your Magic Pointer! 🎯

Hey there, young coder! Let's learn about the $ref hook - it's like having a magic pointer that can remember things and control parts of your webpage!

What is $ref? 🤔

Think of $ref like a sticky note that helps you:

• Remember things between renders
• Point to HTML elements on your page
• Control special parts of your website

Basic Usage 🎮

import { $ref } from "olova";

function MagicButton() {
  const buttonRef = $ref(null);

  return <button ref={buttonRef}>Click Me! </button>;
}

Cool Examples! 🌈

1. Magic Focus Button

function FocusButton() {
  const inputRef = $ref(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} placeholder="Type here!" />
      <button onClick={focusInput}>Focus the input! 🎯</button>
    </div>
  );
}

2. Color Changing Box

function ColorBox() {
  const boxRef = $ref(null);

  const changeColor = () => {
    const colors = ["red", "blue", "green", "purple", "orange"];
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    boxRef.current.style.backgroundColor = randomColor;
  };

  return (
    <div>
      <div
        ref={boxRef}
        style={{
          width: "100px",
          height: "100px",
          border: "2px solid black",
        }}
      >
        Magic Box! 📦
      </div>
      <button onClick={changeColor}>Change Color! 🎨</button>
    </div>
  );
}

3. Measuring Magic

function MeasureBox() {
  const boxRef = $ref(null);
  const [size, setSize] = $state("");

  const measureBox = () => {
    const width = boxRef.current.offsetWidth;
    const height = boxRef.current.offsetHeight;
    setSize(`Width: ${width}px, Height: ${height}px`);
  };

  return (
    <div>
      <div
        ref={boxRef}
        style={{
          width: "200px",
          height: "100px",
          border: "3px solid purple",
        }}
      >
        Measure me! 📏
      </div>
      <button onClick={measureBox}>Get Size! 🔍</button>
      <p>{size}</p>
    </div>
  );
}

Fun Things You Can Do! 🎨

1. Control Video Players

function VideoPlayer() {
  const videoRef = $ref(null);

  const playVideo = () => {
    videoRef.current.play();
  };

  const pauseVideo = () => {
    videoRef.current.pause();
  };

  return (
    <div>
      <video ref={videoRef}>
        <source src="fun-video.mp4" type="video/mp4" />
      </video>
      <button onClick={playVideo}>Play! ▶️</button>
      <button onClick={pauseVideo}>Pause! ⏸️</button>
    </div>
  );
}

Remember!

1. Always initialize your ref with null:

const myRef = $ref(null);

2. Access your ref value using .current:

myRef.current.doSomething();

3. Refs don't cause re-renders when they change!

Cool Projects to Try! 🚀

1. Make a Stopwatch

function Stopwatch() {
  const intervalRef = $ref(null);
  const [time, setTime] = $state(0);

  const startTimer = () => {
    intervalRef.current = setInterval(() => {
      setTime((t) => t + 1);
    }, 1000);
  };

  const stopTimer = () => {
    clearInterval(intervalRef.current);
  };

  return (
    <div>
      <h2>Time: {time} seconds ⏰</h2>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
    </div>
  );
}

Fun Ways to Use Refs! 🎯

You can use refs to:

• Focus on inputs 🎯
• Play/pause videos 🎥
• Measure elements 📏
• Store timers ⏰
• Remember values 🧠

Tips for Young Coders! 💡

1. Use refs when you need to:

   • Control HTML elements directly
   • Store values that don't need renders
   • Remember things between renders

2. Don't forget to check if your ref exists:

if (myRef.current) {
  // Do something cool!
}

Practice Ideas! 🎨

Try making:

1. A magic input that auto-focuses
2. A box that changes size
3. A timer with start/stop buttons
4. A video player with controls

Remember These Magic Rules! 🪄

1. Refs are like magic pointers
2. They don't cause re-renders
3. Always use .current to access values
4. Initialize with null
5. Great for DOM elements

Have Fun! 🎉

Now you know how to use refs to make your website do amazing things! Keep practicing and creating cool stuff!

---

Want to learn more Olova magic? Check out our other guides! 📚