🔧 How to use React Context API with npm library

AuthContext.ts

const initialAuthState = {
  user: null, // or any initial state you want
  isAuthenticated: false,
};

// Create a context with the initial state
export const AuthContext = createContext({
  authState: initialAuthState,
  setAuthState: () => {}
});

// AuthProvider component to provide auth state to its children
export const AuthProvider = ({ children }) => {
  const [authState, setAuthState] = useState(initialAuthState);

  useEffect(() => {
    // Example of updating state, replace this with your actual logic
    const fetchAuthState = async () => {
      // Simulate a fetch or any async operation to get auth data
      const newState = {
        user: { name: 'John Doe' },
        isAuthenticated: true,
      };
      setAuthState(newState);
    };

    fetchAuthState();
  }, []);

  return (
    <AuthContext.Provider value={{ authState, setAuthState }}>
      {children}
    </AuthContext.Provider>
  );
};

// Custom hook to use the auth context
export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error("useAuth must be used within an AuthProvider");
  }
  return context;
};


//Container.tsx
export const Container = ({ children }) => {
  return (
    <AuthProvider>
      {children}
      <ExamplePage/>
    </AuthProvider>
  );
};

//ExamplePage.tsx
export const ExamplePage = () => {
  const authData = useAuth();

  //the data in this log is coming in correctly. 
  console.log('authData:', data);
  return (
    <div>
      example page
    </div>
  );
};


//app.tsx (other project)
import {Container} from 'my-package'

export const App = () => {
  return (
    <Container>
      <ListPage/>
    </AuthProvider>
  );
};


//listPage.tsx
import {useAuth} from 'my-package'

export const ListPage = () => {
  const authData = useAuth();


  console.log('authData:', data);   
  return (
    <div>
        List page
    </div>
  );
};