diff --git a/LanguageContext.tsx.md b/LanguageContext.tsx.md new file mode 100644 index 0000000..8f76412 --- /dev/null +++ b/LanguageContext.tsx.md @@ -0,0 +1,114 @@ +# LanguageContext.tsx Documentation + +## Overview + +The `LanguageContext.tsx` file is a React component that utilizes the Context API to manage and provide a language setting across a React application. This file is crucial for applications that need to support multiple languages or allow users to switch between different language settings. Its primary purpose is to create a context for language selection and provide a mechanism to update the language state. + +## Index + +1. [File Structure](#file-structure) +2. [Imports](#imports) +3. [LanguageContext Creation](#languagecontext-creation) +4. [LanguageProvider Component](#languageprovider-component) +5. [Usage](#usage) + +## File Structure + +The `LanguageContext.tsx` file is structured as follows: + +- **Imports**: Necessary modules from React. +- **Context Creation**: Establishes a context for managing language state. +- **LanguageProvider Component**: A provider component that wraps around child components to supply them with language context. + +## Imports + +```typescript +'use client'; +import React, { createContext, useState, ReactNode } from 'react'; +``` + +- **'use client';**: A directive used in certain environments to indicate that the code is intended to run on the client-side. +- **React**: The core React library for creating components. +- **createContext**: A function from React to create a context object. +- **useState**: A hook that lets you add state to functional components. +- **ReactNode**: A type representing any node that can be rendered by React, such as elements, strings, numbers, or fragments. + +## LanguageContext Creation + +```typescript +export const LanguageContext = createContext<{ + language: string; + setLanguage: (lang: string) => void; +}>({ + language: 'eng', + setLanguage: () => {}, +}); +``` + +- **LanguageContext**: This is a context object created to manage the language setting. It provides two main properties: + - **language**: Represents the current language, initialized to `'eng'`. + - **setLanguage**: A function to update the current language. It is initialized as a no-op function. + +## LanguageProvider Component + +```typescript +export const LanguageProvider = ({ children }: { children: ReactNode }) => { + const [language, setLanguage] = useState('eng'); + return ( + + {children} + + ); +}; +``` + +- **LanguageProvider**: This is a functional component designed to wrap around other components to provide them with access to the language context. + - **children**: Represents the child components that will have access to the language context. + - **useState('eng')**: Initializes a state variable `language` with a default value of `'eng'`. + - **LanguageContext.Provider**: A component that provides the `language` and `setLanguage` to its children. + +## Usage + +To use the `LanguageContext`, you must wrap the desired components with `LanguageProvider`. This allows those components to access and modify the language state. + +### Steps to Implement: + +1. **Wrap Application**: Wrap your application's component tree with `LanguageProvider`. + + ```jsx + import React from 'react'; + import { LanguageProvider } from './LanguageContext'; + + const App = () => ( + + + + ); + + export default App; + ``` + +2. **Consume Context**: Use the `useContext` hook to access the language context in any component. + + ```jsx + import React, { useContext } from 'react'; + import { LanguageContext } from './LanguageContext'; + + const YourComponent = () => { + const { language, setLanguage } = useContext(LanguageContext); + + // Example of changing the language + const changeLanguage = () => { + setLanguage('es'); + }; + + return ( +
+ Current Language: {language} + +
+ ); + }; + + export default YourComponent; + ``` \ No newline at end of file