🔖 Release stable version

src/env-context.ts

@@ -2,4 +2,4 @@ import { createContext } from 'react';
 
 import { type ProcessEnv } from './typings/process-env';
 
-export const EnvContext = createContext<ProcessEnv>({});
+export const EnvContext = createContext<ProcessEnv | null>(null);

src/env-provider.spec.tsx

@@ -20,7 +20,7 @@ describe('EnvProvider', () => {
     process.env = {};
   });
 
-  it("should make the env available to it's children ", () => {
+  it("should make the env available to it's children", () => {
     const env = { NODE_ENV: 'test', API_URL: 'http://localhost:3000' };
 
     const SomeClientComponent = () => {

src/public-env-provider.spec.tsx

@@ -70,7 +70,7 @@ describe('PublicEnvProvider', () => {
     expect(getByText(/^BAR:/).textContent).toBe('BAR: ');
   });
 
-  it("should only make public env available to it's children ", () => {
+  it("should only make public env available to it's children", () => {
     process.env = {
       NEXT_PUBLIC_FOO: 'foo-value',
       BAR: 'bar-value',

src/use-env-context.spec.tsx

@@ -0,0 +1,71 @@
+import '@testing-library/jest-dom';
+
+import { render } from '@testing-library/react';
+
+import { EnvProvider } from './env-provider';
+import { ProcessEnv } from './typings/process-env';
+import { useEnvContext } from './use-env-context';
+
+const errorSpy = jest.spyOn(console, 'error');
+
+let processEnv: NodeJS.ProcessEnv;
+
+beforeAll(() => {
+  errorSpy.mockImplementation();
+
+  processEnv = process.env;
+});
+
+afterAll(() => {
+  errorSpy.mockRestore();
+
+  process.env = processEnv;
+});
+
+describe('useEnvContext', () => {
+  beforeEach(() => {
+    process.env = {};
+  });
+
+  it('should retrieve env vars from the context', () => {
+    const env = { NODE_ENV: 'test', API_URL: 'http://localhost:3000' };
+
+    let contextEnv: ProcessEnv = {};
+
+    const SomeClientComponent = () => {
+      contextEnv = useEnvContext();
+
+      return (
+        <>
+          <p>NODE_ENV: {contextEnv.NODE_ENV}</p>
+          <p>API_URL: {contextEnv.API_URL}</p>
+        </>
+      );
+    };
+
+    render(
+      <EnvProvider env={env}>
+        <SomeClientComponent />
+      </EnvProvider>,
+    );
+
+    expect(contextEnv).toEqual(env);
+  });
+
+  it('should throw when used outside of provider', () => {
+    const SomeClientComponent = () => {
+      const { NODE_ENV, API_URL } = useEnvContext();
+
+      return (
+        <>
+          <p>NODE_ENV: {NODE_ENV}</p>
+          <p>API_URL: {API_URL}</p>
+        </>
+      );
+    };
+
+    expect(() => render(<SomeClientComponent />)).toThrow(
+      'useEnvContext must be used within a EnvProvider or PublicEnvProvider',
+    );
+  });
+});

src/use-env-context.ts

@@ -4,4 +4,14 @@ import { useContext } from 'react';
 
 import { EnvContext } from './env-context';
 
-export const useEnvContext = () => useContext(EnvContext);
+export const useEnvContext = () => {
+  const context = useContext(EnvContext);
+
+  if (!context) {
+    throw new Error(
+      'useEnvContext must be used within a EnvProvider or PublicEnvProvider',
+    );
+  }
+
+  return context;
+};