Export interface for extension (#6)

src/component/MSWToolbar.tsx

@@ -10,36 +10,7 @@ import { usePrevious } from './hooks';
 import styles from './styles.module.css';
 import { WorkerMode } from '../types';
 import { get, modes, set } from '../helpers';
-
-interface Props {
-  /**
-   * A prefix will be prepended to the localStorage key we use for persisting settings. If you use this component
-   * on many applications locally, you'll want to set this so configuration from app A doesn't impact app B.
-   */
-  prefix?: string;
-  /**
-   * The base url of your requests. This is required to use 'error' mode as it takes the base domain and intercepts any request regardless of the path.
-   */
-  apiUrl: string;
-  /**
-   * Actions can be useful for adding custom buttons/behaviors that might go along with MSW. If you're caching requests with RTK Query or react-query,
-   * it would be useful to add an 'Invalidate Cache' button here.
-   */
-  actions?: React.ReactElement;
-  /**
-   * If the worker is not enabled, we won't ever load it and will just load children.
-   */
-  isEnabled?: boolean;
-  /**
-   * An instance of the MSW worker returned from `setupWorker`.
-   */
-  worker: SetupWorkerApi | undefined;
-  /**
-   * This component takes children so that it can ensure the worker has started before rendering the tree. This guarantees that
-   * all requests will be intercepted.
-   */
-  children?: React.ReactNode;
-}
+import { MSWToolbarProps } from '..';
 
 /**
  * This is a simple toolbar that allows you to toggle MSW handlers in local development as well as easily invalidate all of the caches.
@@ -56,7 +27,7 @@ export const MSWToolbar = ({
   actions,
   worker,
   prefix = '',
-}: Props) => {
+}: MSWToolbarProps) => {
   if ((isEnabled && !worker) || (isEnabled && worker && !worker.start)) {
     console.warn(
       'Unable to load MSWToolbar due to the worker being undefined. Please pass in a worker instance from setupWorker(...handlers).'

src/types.ts

@@ -1,3 +1,35 @@
+import { SetupWorkerApi } from 'msw';
+
+export interface MSWToolbarProps {
+  /**
+   * A prefix will be prepended to the localStorage key we use for persisting settings. If you use this component
+   * on many applications locally, you'll want to set this so configuration from app A doesn't impact app B.
+   */
+  prefix?: string;
+  /**
+   * The base url of your requests. This is required to use 'error' mode as it takes the base domain and intercepts any request regardless of the path.
+   */
+  apiUrl: string;
+  /**
+   * Actions can be useful for adding custom buttons/behaviors that might go along with MSW. If you're caching requests with RTK Query or react-query,
+   * it would be useful to add an 'Invalidate Cache' button here.
+   */
+  actions?: React.ReactElement;
+  /**
+   * If the worker is not enabled, we won't ever load it and will just load children.
+   */
+  isEnabled?: boolean;
+  /**
+   * An instance of the MSW worker returned from `setupWorker`.
+   */
+  worker: SetupWorkerApi | undefined;
+  /**
+   * This component takes children so that it can ensure the worker has started before rendering the tree. This guarantees that
+   * all requests will be intercepted.
+   */
+  children?: React.ReactNode;
+}
+
 export type Setting = 'mode' | 'delay' | 'status';
 export type WorkerStatus = 'enabled' | 'disabled';
 export type WorkerMode = 'normal' | 'error';