Add BroswerRouterProps to SciReactUIProviderProps

Author: VictoriaBeilsten-Edmands

changelog.md

@@ -2,7 +2,7 @@ SciReactUI Changelog
 ====================
 
 
-[v0.1.1] - 2025-?-?
+[v0.2.0] - 2025-?-?
 --------------------
 
 ### Added
@@ -12,7 +12,7 @@ SciReactUI Changelog
 - Styles added to Navbar and Footer incorrectly remove built in styles.
 
 ### Changed
-- Breadcrumbs component uses react-router-dom for page routing.
+- Breadcrumbs component uses react-router-dom for page routing. Breaking change requires use of BrowserRouter or SciReactUIProvider.
 
 [v0.1.0] - 2025-04-10
 ---------------------

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diamondlightsource/sci-react-ui",
-  "version": "0.1.1alpha",
+  "version": "0.2",
   "description": "A theme and component library to make websites at scientific institutions simple to create.",
   "author": "Diamond Light Source",
   "license": "ISC",

src/index.ts

@@ -12,3 +12,4 @@ export * from "./themes/BaseTheme";
 export * from "./themes/GenericTheme";
 export * from "./themes/DiamondTheme";
 export * from "./themes/ThemeProvider";
+export * from "./themes/SciReactUIProvider";

src/themes/SciReactUIProvider.tsx

@@ -1,15 +1,20 @@
 import * as React from "react";
-import { BrowserRouter } from "react-router-dom";
+import { BrowserRouter, BrowserRouterProps } from "react-router-dom";
 import { ThemeProvider, ThemeProviderProps } from "./ThemeProvider";
 
-type SciReactUIProviderProps = React.PropsWithChildren<ThemeProviderProps>;
+interface SciReactUIProviderProps
+  extends React.PropsWithChildren<ThemeProviderProps> {
+  router?: BrowserRouterProps;
+}
 
-export const SciReactUIProvider: React.FC<SciReactUIProviderProps> = (
-  props,
-) => {
+export const SciReactUIProvider: React.FC<SciReactUIProviderProps> = ({
+  children,
+  router,
+  ...themeProps
+}) => {
   return (
-    <ThemeProvider {...props}>
-      <BrowserRouter> {props.children} </BrowserRouter>
+    <ThemeProvider {...themeProps}>
+      <BrowserRouter {...router}>{children} </BrowserRouter>
     </ThemeProvider>
   );
 };