Demo cách dùng sử dụng useContext

1 useContext là gì?

useContext là 1 tính năng của reactjs giúp chúng ta truyền state từ component này sang component 1 cách đơn giản mà không cần qua nhiều cấp cha

2 Quy trình dùng useContext

định nghĩa 1 context ===> bao bọc toàn bộ thành phần DOM của component bằng thẻ Provider ==> dùng useContext để xử lý và truyền các biến giữa các component

3 Demo

Demo này sẽ tạo provide sử dụng useContext để chuyển chế độ theme light hay dark

Đầu tiên chúng ta tạo nextjs app hoặc create app .Ở đây mình dùng nextjs app vì mình quen dùng nó với lệnh sau :

npx create-next-app@latest

Sau khi cài đặt xong chúng ta có 1 folder chứa nextjs farmwork

Tạo file src\provide\ThemeProvide.tsx chứa các định nghĩa về context và bao bọc DOM .Code như sau :

'use client'
import React, { createContext, useState } from 'react'
export const ThemeContext = createContext({ theme: 'light', toggletheme: () => { } })
const ThemeProvide = ({ children }: { children: React.ReactNode }) => {
    const [theme, setTheme] = useState('light');
    const toggletheme = () => {

        setTheme(theme === 'light' ? 'dark' : 'light')
    }

    return (
        <>
            <ThemeContext.Provider value={{ theme: theme, toggletheme }}>
                {children}
            </ThemeContext.Provider>
        </>
    )
}

export default ThemeProvide

Giờ hcúng ta gắn nó vào file src\app\layout.tsx để có thể xử dụng useContext ở mọi component

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import ThemeProvide from "@/provide/ThemeProvide";
import Mynavbar from "@/components/Mynavbar";

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

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

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

Chúng ta sẽ xem cách sử dụng chúng thông qua demo truyền dữ vào vào context và lấy nó ra như sau

Trong file src\app\post\page.tsx

'use client'
import { ThemeContext } from '@/provide/ThemeProvide'
import React, { useContext } from 'react'

const PostPage = () => {
    const { theme, toggletheme } = useContext(ThemeContext);
    return (
        <div>
            {theme}
        </div>
    )
}

export default PostPage

Trong file src\components\Theme.tsx

'use client'
import { ThemeContext } from '@/provide/ThemeProvide'
import React, { useContext } from 'react'

const Theme = () => {
    const { theme, toggletheme } = useContext(ThemeContext);
    return (
        <>
            <button
                onClick={toggletheme}
                className="inline-flex items-center justify-center px-8 py-4 font-sans font-semibold tracking-wide text-white bg-blue-500 rounded-lg h-[60px]">
                Change theme
            </button>
            <h3>Theme đang dùng {theme}</h3>
        </>
    )
}

export default Theme