In React, a wrapper component is often used to encapsulate or "wrap" other components to provide additional functionality, styling, or context. Here's how you can create and use a wrapper in React:

1. Basic Wrapper Component

A basic wrapper passes children components inside it.

import React from "react";

const Wrapper = ({ children }) => {
  return <div className="wrapper">{children}</div>;
};

export default Wrapper;

Usage:

import React from "react";
import Wrapper from "./Wrapper";

const App = () => {
  return (
    <Wrapper>
      <h1>Hello, World!</h1>
      <p>This is wrapped content.</p>
    </Wrapper>
  );
};

export default App;

2. Wrapper with Props

You can also pass props to modify the wrapper behavior dynamically.

const Wrapper = ({ children, backgroundColor }) => {
  const style = {
    backgroundColor: backgroundColor || "white",
    padding: "20px",
    border: "1px solid #ccc",
  };

  return <div style={style}>{children}</div>;
};

export default Wrapper;

Usage:

<Wrapper backgroundColor="lightblue">
  <h2>Dynamic Background Color</h2>
</Wrapper>

3. Context Provider as a Wrapper

In more complex scenarios, you can use context to share state or functionality.

import React, { createContext, useState } from "react";

const ThemeContext = createContext();

const ThemeProvider = ({ children }) => {
  const [theme, setTheme] = useState("light");

  const toggleTheme = () => {
    setTheme((prev) => (prev === "light" ? "dark" : "light"));
  };

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

export { ThemeContext, ThemeProvider };

Usage:

import React, { useContext } from "react";
import { ThemeContext, ThemeProvider } from "./ThemeProvider";

const ThemedComponent = () => {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff" }}>
      <p>Current Theme: {theme}</p>
      <button onClick={toggleTheme}>Toggle Theme</button>
    </div>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <ThemedComponent />
    </ThemeProvider>
  );
};

export default App;

4. Higher-Order Component (HOC) as a Wrapper

You can use an HOC to wrap components with additional functionality.

const withWrapper = (Component) => (props) => {
  return (
    <div style={{ border: "2px solid red", padding: "10px" }}>
      <Component {...props} />
    </div>
  );
};

export default withWrapper;

Usage: