React Context Nedir?

React componentler arasındaki veir alış verişini yukarıdan aşağı doğru ebeynden *çocuk birleşenlere doğru iletir. Ancak kaynakların ve verilerin bir farklı noktalarda kullanılması veya değişikliklik yapılması gerekebilir. Bu gibi durumlarda react componentleri arasınındaki veri değişimini react context yardımıyla gerçekleştirir.

createContext: Yeni bir context tanımlar
useContext oluşturulan contextin kullanımını sağlar.
Kendi Theme contextimizi oluşturalım
themeType tipinde context oluşturuldu. Bu context string değere sahiğ bir theme , theme dark moda geçirmek için darkFun fonksiyonunu light moda çevirmek üzere lightFun kullanır.
createContext kullanılarak themeType* tipinde bir ThemeContext oluşturulmuştur.

const ThemeContext = createContext < themeType > authContextDefaultValues;

Oluşturulan context kullanılabilmesi için useContext yararlanılır.

export function useTheme() {
  return useContext(ThemeContext);
}

createdContext içerisinde tanımlatığımız ThemeContexti amaçladığımız comonentlerin en üst componentine Provider olarak tanımlamamız gerekir.

export function ThemeProvider({ children }: Props) {
  const [theme, setTheme] = useState("");

  const darkFun = () => {
    setTheme("dark");
  };
  const lightFun = () => {
    setTheme("light");
  };

  const values = {
    theme,
    darkFun,
    lightFun,
  };
  useEffect(() => {
    localStorage.setItem("theme", theme);
  }, [theme]);
  return (
    <>
      <ThemeContext.Provider value={values}>{children}</ThemeContext.Provider>
    </>
  );
}

Oluşan Theme* contextin bütün codları aşağıdaki gibi birleştirilmiştir.

ThemeProvider.tsx

import {
  ReactNode,
  createContext,
  useContext,
  useEffect,
  useState,
} from "react";

type themeType = {
  theme?: string;
  darkFun: () => void;
  lightFun: () => void;
};

const authContextDefaultValues: themeType = {
  theme: "dark",
  darkFun: () => {},
  lightFun: () => {},
};
const ThemeContext = createContext<themeType>(authContextDefaultValues);

export function useTheme() {
  return useContext(ThemeContext);
}

type Props = {
  children: ReactNode;
};

export function ThemeProvider({ children }: Props) {
  const [theme, setTheme] = useState("");

  const darkFun = () => {
    setTheme("dark");
  };
  const lightFun = () => {
    setTheme("light");
  };

  const values = {
    theme,
    darkFun,
    lightFun,
  };
  useEffect(() => {
    localStorage.setItem("theme", theme);
  }, [theme]);
  return (
    <>
      <ThemeContext.Provider value={values}>{children}</ThemeContext.Provider>
    </>
  );
}

layout.tsx

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/context/ThemeContext";
import { AuthProvider } from "@/context/AuthProvider";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode,
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}

Sefa DemirtaşSoftware DeveloperSend an email