thereturning Comments - Answer Overflow

Being used in home.jsx but there is this error at useTooltip() being undefined TypeError: Cannot destructure property 'tooltip' of 'useTooltip(...)' as it is undefined. at Home (Home.jsx:16:11)

import MessageContainer from "../../components/messages/MessageContainer";
import Serverbar from "../../components/serverbar/Serverbar";
import Servers from "../../components/serverbar/Servers";
import Tooltip from "../../components/serverbar/Tooltip";
import Sidebar from "../../components/sidebar/Sidebar";
import { CSSTransition } from "react-transition-group";
import { useState, useRef } from "react";
import {
  TooltipProvider,
  useTooltip,
} from "../../components/serverbar/TooltipContext";

const Home = () => {
  const nodeRef = useRef(null);
  console.log(TooltipProvider);
  const { tooltip } = useTooltip(); ERROR UNDEFINED
  return (
    <div className="flex overflow-hidden">
      <TooltipProvider>
        <Serverbar />
        <CSSTransition
          in={tooltip.visible}
          nodeRef={nodeRef}
          timeout={75}
          classNames="server-tooltip"
          unmountOnExit
        >
          <Tooltip
            ref={nodeRef}
            name={tooltip.name}
            position={tooltip.position}
          />
        </CSSTransition>
      </TooltipProvider>

      <Sidebar />
      <MessageContainer />
    </div>
  );
};
export default Home;

import MessageContainer from "../../components/messages/MessageContainer";
import Serverbar from "../../components/serverbar/Serverbar";
import Servers from "../../components/serverbar/Servers";
import Tooltip from "../../components/serverbar/Tooltip";
import Sidebar from "../../components/sidebar/Sidebar";
import { CSSTransition } from "react-transition-group";
import { useState, useRef } from "react";
import {
  TooltipProvider,
  useTooltip,
} from "../../components/serverbar/TooltipContext";

const Home = () => {
  const nodeRef = useRef(null);
  console.log(TooltipProvider);
  const { tooltip } = useTooltip(); ERROR UNDEFINED
  return (
    <div className="flex overflow-hidden">
      <TooltipProvider>
        <Serverbar />
        <CSSTransition
          in={tooltip.visible}
          nodeRef={nodeRef}
          timeout={75}
          classNames="server-tooltip"
          unmountOnExit
        >
          <Tooltip
            ref={nodeRef}
            name={tooltip.name}
            position={tooltip.position}
          />
        </CSSTransition>
      </TooltipProvider>

      <Sidebar />
      <MessageContainer />
    </div>
  );
};
export default Home;

16 replies

KPCKevin Powell - Community

•Created by thereturning on 8/14/2024 in #front-end

how to style scrollbar with tailwind

if ur using daisyui, do this. this thing was overiding the webkit

 * {
      scrollbar-color: initial !important;
    }

 * {
      scrollbar-color: initial !important;
    }

7 replies

KPCKevin Powell - Community

•Created by thereturning on 8/14/2024 in #front-end

how to style scrollbar with tailwind

/* conversations scrollbar */
    .scrollbar-conversations::-webkit-scrollbar {
      width: 8px;
    }
    .scrollbar-conversations::-webkit-scrollbar-thumb {
      background: purple;
      border-radius: 4px;
      min-height: 40px;
      background-clip: padding-box;
      border: 2px solid transparent;
    }
    .scrollbar-conversations::-webkit-scrollbar-track {
      background: transparent;
    }
    .scrollbar-conversations::-webkit-scrollbar-thumb {
      visibility: hidden;
    }
    .scrollbar-conversations:hover::-webkit-scrollbar-thumb {
      visibility: visible;
    }

/* conversations scrollbar */
    .scrollbar-conversations::-webkit-scrollbar {
      width: 8px;
    }
    .scrollbar-conversations::-webkit-scrollbar-thumb {
      background: purple;
      border-radius: 4px;
      min-height: 40px;
      background-clip: padding-box;
      border: 2px solid transparent;
    }
    .scrollbar-conversations::-webkit-scrollbar-track {
      background: transparent;
    }
    .scrollbar-conversations::-webkit-scrollbar-thumb {
      visibility: hidden;
    }
    .scrollbar-conversations:hover::-webkit-scrollbar-thumb {
      visibility: visible;
    }