在整个 React 应用程序中全局共享辅助函数

Question

How would one go about making global functions in React that you only have to import into one file that shares it across every page?

Right now I can have to import helper.tsx into each file where I want to use them in.

For example I have a helper.tsx file that exports functions as such:

interface cookieProps {
  name: string;
  value: string;
  exdays: number;
}
export const getCookie = ({ name }: cookieProps) => {
  var i,
    x,
    y,
    ARRcookies = document.cookie.split(";");
  for (i = 0; i < ARRcookies.length; i++) {
    x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
    y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
    x = x.replace(/^\s+|\s+$/g, "");
    if (x == name) {
      return unescape(y);
    }
  }
  return "";
};

Now were I do import it into my App.tsx file like this:

import React, { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Cards from "./pages/Cards";
import { getCookie } from "./controllers/helpers";

const theme = createTheme({
  palette: {
    primary: {
      main: "#fff",
    },
    secondary: {
      main: "#f8f8f8",
    },
  })
export default function App() {
  return (
    <ThemeProvider theme={theme}>
        <BrowserRouter>
          <Navbar />
          <Routes>
            <Route path="/home" element={<Home />} />
            <Route path="/cards" element={<Cards />} />
            <Route path="*" element={<Home />} />
          </Routes>
          <Footer />
        </BrowserRouter>
    </ThemeProvider>
  );
}

I cannot call it from Home or Cards etc. When declared cookie imports are not initialised or used inside App.tsx I cannot access them. I want to be able to call all of those helper functions from every page possible and not have to import them again.

Should I make the imports into vars and call them as helper.getCookie ?

Answer 1

Bind that function into window , like window.getCookie = getCookie , or add to a helper object like window.helper = {getCookie() {...}}

p/s: I am using this method, not sure if that is a right way to do or if it affects whole website performance, but no problems so far