useRef Hook - الوصول إلى DOM والقيم الثابتة

import React, { useRef } from 'react';

function TextInputFocus() {
  // إنشاء مرجع لتخزين عنصر الإدخال
  const inputRef = useRef(null);

  const handleFocus = () => {
    // الوصول إلى عنصر DOM والتركيز عليه
    inputRef.current.focus();
  };

  return (
    <div>
      <input
        ref={inputRef}
        type="text"
        placeholder="انقر على الزر للتركيز علي"
      />
      <button onClick={handleFocus}>
        التركيز على الإدخال
      </button>
    </div>
  );
}

export default TextInputFocus;

import React, { useRef, useState } from 'react';

function VideoPlayer() {
  const videoRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(false);

  const togglePlay = () => {
    if (isPlaying) {
      videoRef.current.pause();
    } else {
      videoRef.current.play();
    }
    setIsPlaying(!isPlaying);
  };

  const handleVolumeChange = (e) => {
    videoRef.current.volume = e.target.value / 100;
  };

  return (
    <div>
      <video
        ref={videoRef}
        src="https://example.com/video.mp4"
        width="400"
      />

      <div>
        <button onClick={togglePlay}>
          {isPlaying ? 'إيقاف مؤقت' : 'تشغيل'}
        </button>

        <label>
          الصوت:
          <input
            type="range"
            min="0"
            max="100"
            defaultValue="50"
            onChange={handleVolumeChange}
          />
        </label>
      </div>
    </div>
  );
}

export default VideoPlayer;

import React, { useRef, useState, useEffect } from 'react';

function RenderCounter() {
  const [count, setCount] = useState(0);
  const renderCount = useRef(0);

  // زيادة عدد العروض في كل عرض
  useEffect(() => {
    renderCount.current += 1;
  });

  return (
    <div>
      <h2>العدد: {count}</h2>
      <p>تم عرض هذا المكون {renderCount.current} مرة</p>

      <button onClick={() => setCount(count + 1)}>
        زيادة العدد
      </button>
    </div>
  );
}

export default RenderCounter;

import React, { useRef, useState, useEffect } from 'react';

function PreviousValue() {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    // تخزين العدد الحالي كسابق للعرض التالي
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <div>
      <h2>العدد الحالي: {count}</h2>
      <h3>العدد السابق: {prevCount ?? 'لا يوجد'}</h3>

      <button onClick={() => setCount(count + 1)}>
        زيادة
      </button>
      <button onClick={() => setCount(count - 1)}>
        نقصان
      </button>
    </div>
  );
}

export default PreviousValue;

import React, { useRef, useState } from 'react';

function StopwatchWithRef() {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef(null);

  const start = () => {
    if (isRunning) return;

    setIsRunning(true);
    intervalRef.current = setInterval(() => {
      setTime(prevTime => prevTime + 1);
    }, 1000);
  };

  const stop = () => {
    if (!isRunning) return;

    setIsRunning(false);
    clearInterval(intervalRef.current);
  };

  const reset = () => {
    stop();
    setTime(0);
  };

  return (
    <div>
      <h2>الوقت: {time} ثانية</h2>

      <button onClick={start} disabled={isRunning}>
        بدء
      </button>
      <button onClick={stop} disabled={!isRunning}>
        إيقاف
      </button>
      <button onClick={reset}>
        إعادة تعيين
      </button>
    </div>
  );
}

export default StopwatchWithRef;

import React, { useState, useCallback } from 'react';

function MeasureDimensions() {
  const [height, setHeight] = useState(0);

  // مرجع استدعاء يقيس العنصر
  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div>
      <h2 ref={measuredRef}>
        هذا عنوان للقياس
      </h2>
      <p>ارتفاع العنوان هو: {height}px</p>
    </div>
  );
}

export default MeasureDimensions;

import React, { useRef, forwardRef } from 'react';

// مكون طفل يقبل مرجعًا موجهًا
const CustomInput = forwardRef((props, ref) => {
  return (
    <input
      ref={ref}
      type="text"
      className="custom-input"
      {...props}
    />
  );
});

// مكون أب يستخدم المرجع الموجه
function ParentComponent() {
  const inputRef = useRef(null);

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

  return (
    <div>
      <CustomInput
        ref={inputRef}
        placeholder="يمكن التركيز علي من الأب"
      />
      <button onClick={focusInput}>
        التركيز على الإدخال المخصص
      </button>
    </div>
  );
}

export default ParentComponent;

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  // كشف طرق محددة فقط للأب
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    scrollIntoView: () => {
      inputRef.current.scrollIntoView({ behavior: 'smooth' });
    },
    getValue: () => {
      return inputRef.current.value;
    }
  }));

  return <input ref={inputRef} {...props} />;
});

function FormWithFancyInput() {
  const fancyInputRef = useRef();

  const handleSubmit = (e) => {
    e.preventDefault();
    const value = fancyInputRef.current.getValue();
    console.log('قيمة الإدخال:', value);
    fancyInputRef.current.focus();
  };

  return (
    <form onSubmit={handleSubmit}>
      <FancyInput
        ref={fancyInputRef}
        placeholder="اكتب شيئًا"
      />
      <button type="submit">إرسال</button>
    </form>
  );
}

export default FormWithFancyInput;

import React, { useRef, useEffect, useState } from 'react';

function ChatWindow() {
  const [messages, setMessages] = useState([
    { id: 1, text: 'مرحبا!' },
    { id: 2, text: 'كيف حالك؟' }
  ]);
  const [inputValue, setInputValue] = useState('');
  const messagesEndRef = useRef(null);

  // التمرير التلقائي إلى الأسفل عندما تتغير الرسائل
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  const addMessage = (e) => {
    e.preventDefault();
    if (!inputValue.trim()) return;

    setMessages(prev => [
      ...prev,
      { id: Date.now(), text: inputValue }
    ]);
    setInputValue('');
  };

  return (
    <div style={{ height: '300px', display: 'flex', flexDirection: 'column' }}>
      <div style={{ flex: 1, overflow: 'auto', border: '1px solid #ccc', padding: '10px' }}>
        {messages.map(msg => (
          <div key={msg.id} style={{ marginBottom: '10px' }}>
            {msg.text}
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      <form onSubmit={addMessage} style={{ display: 'flex', marginTop: '10px' }}>
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="اكتب رسالة..."
          style={{ flex: 1 }}
        />
        <button type="submit">إرسال</button>
      </form>
    </div>
  );
}

export default ChatWindow;