feat(nui): Initial NUI files

web/src/providers/VisibilityProvider.tsx

@@ -0,0 +1,37 @@
+import React, { Context, createContext, useContext, useState } from "react";
+import { useNuiEvent } from "../hooks/useNuiEvent";
+
+const VisibilityCtx = createContext<VisibilityProviderValue | null>(null);
+
+interface VisibilityProviderValue {
+  setVisible: (visible: boolean) => void;
+  visible: boolean;
+}
+
+// This should be mounted at the top level of your application, it is currently set to
+// apply a CSS visibility value. If this is non-performant, this should be customized.
+export const VisibilityProvider: React.FC = ({ children }) => {
+  const [visible, setVisible] = useState(false);
+
+  useNuiEvent<boolean>("setVisible", setVisible);
+
+  return (
+    <VisibilityCtx.Provider
+      value={{
+        visible,
+        setVisible,
+      }}
+    >
+      <div
+        style={{ visibility: visible ? "visible" : "hidden", height: "100%" }}
+      >
+        {children}
+      </div>
+    </VisibilityCtx.Provider>
+  );
+};
+
+export const useVisibility = () =>
+  useContext<VisibilityProviderValue>(
+    VisibilityCtx as Context<VisibilityProviderValue>
+  );