flowbite with react interactive elements don't work #49

dawit-michael · 2021-12-20T17:36:14Z

dawit-michael
Dec 20, 2021

I've tried to use flowbite via NPM. followed the quick start guide . I've installed the package + added to tailwind.config.js also added in the index.html + imported flowbite in app.tsx. but the interactive elements still don't work :(

Answered by zoltanszogyenyi

Dec 20, 2021

Hey @dawit-michael,

We are aware of the issue of the event listeners not registering because of the virtual DOM from React. We're currently working on a compatibility solution for v1.2.1 which we could launch in a few days/early January based on progress.

Either way, we will launch a separate React + Flowbite library in February and that will make things a lot smoother.

Contributions are welcome and if you find a solution, let us know!

View full answer

zoltanszogyenyi · 2021-12-20T17:43:43Z

zoltanszogyenyi
Dec 20, 2021
Maintainer

Hey @dawit-michael,

We are aware of the issue of the event listeners not registering because of the virtual DOM from React. We're currently working on a compatibility solution for v1.2.1 which we could launch in a few days/early January based on progress.

Either way, we will launch a separate React + Flowbite library in February and that will make things a lot smoother.

Contributions are welcome and if you find a solution, let us know!

10 replies

zoltanszogyenyi May 19, 2022
Maintainer

Hey, everyone!

We have a standalone React library almost ready for production: https://github.com/themesberg/flowbite-react

Please check this out if you want to use it for React, Next JS or React Native.

Thanks!

Aqibrafiq001 May 19, 2022

flowbite is now running fine after adding cdn in index.html in reactjs.
please mention clearly in react documentation.

for those who are getting error you can do these changes

add this line in head
add this line in body <script src="https://unpkg.com/[email protected]/dist/flowbite.js"></script>

Aqibrafiq001 May 20, 2022

@zoltanszogyenyi please mention how to import component im getting error in importing in react i follow above link

nathaniel-ross Dec 7, 2022

@Aqibrafiq001 what line do you need to add in head?

skandarajeev Sep 9, 2023

add what in head, you left that blank

adriDiazz · 2022-06-22T23:54:33Z

adriDiazz
Jun 22, 2022

I've tried to use flowbite via NPM. followed the quick start guide . I've installed the package + added to tailwind.config.js also added in the index.html + imported flowbite in app.tsx. but the interactive elements still don't work :(

Hi have you solve the problem, im getting the same error

14 replies

Namnika Mar 3, 2023

Hi @Aqibrafiq001, You're almost correct, they should mention in the docs how to import flowbite-react components after installing it :(

dawit-michael Mar 3, 2023
Author

@Namnika can you please share your Header.js code. and please try restarting.

Namnika Mar 3, 2023

Hi @dawit-michael, Thank you so much for your quick response,
I shared all relevant codes to try to find out errors easily as for your reference,

This is my Header.js file code:


`import React, { useState } from "react";
import { Navbar } from "flowbite-react";
import "./navbar.css";
import Switcher from "../Switcher";

export default function Header() {
  const [isNavExpanded, setIsNavExpanded] = useState(false);

  return (
    <>
      {/* I just only want img with brand name part in my navbar */}
      <div className="w-4/5">
        <Navbar fluid={true} rounded={true}>
          <React.Fragment key=".0">
            <Navbar.Brand href="https://flowbite.com/">
              <img
                src="https://flowbite.com/docs/images/logo.svg"
                className="mr-3 h-6 sm:h-9"
                alt="Flowbite Logo"
              />
              <span className="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
                Flowbite
              </span>
            </Navbar.Brand>
          </React.Fragment>
        </Navbar>
      </div>
    </>
  );
}
`

this is package.json:

"dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^1.3.3", "flowbite": "^1.6.3", "flowbite-react": "^0.4.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "react-toggle-dark-mode": "^1.1.1", "web-vitals": "^2.1.4" },

this is tailwind.config.css:

/** @type {import('tailwindcss').Config} */ module.exports = { darkMode: "class", content: ["./src/**/*.{js,jsx,ts,tsx}" ,"./node_modules/flowbite/**/*.js"], theme: {}, plugins: [require("flowbite-typography"), require("flowbite/plugin")], };
this is index.html :

<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/flowbite.min.css" rel="stylesheet" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.3/flowbite.min.js"></script>
  </body>

I hope you will get this.. actually, I restarted it but still getting that error, Even then I tried to remove the navbar component and try to use the <Footer> component but still unsuccessful :(

dawit-michael Mar 3, 2023
Author

In your tailwind.config.js you should add the following according to this link
content: [ // ... 'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}' ]
Also try to install the package again following the link here

Namnika Mar 3, 2023

Thank you so muchh for helping me a lottt!!! 😭😭
When you said for restarting I restarted then it works better as expected!!
Actually, I was installing packages while running the localhost 😕

Here you can see it's working :

Thanks a lottt!! :(

gedeonagmas · 2024-02-17T02:21:22Z

gedeonagmas
Feb 17, 2024

and for tooltip, add the following lines in your index.html file
`

`

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Themesberg

flowbite with react interactive elements don't work #49

{{title}}

Replies: 3 comments 24 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

flowbite with react interactive elements don't work #49

Replies: 3 comments · 24 replies

zoltanszogyenyi Dec 20, 2021 Maintainer

zoltanszogyenyi May 19, 2022 Maintainer

dawit-michael Mar 3, 2023 Author

dawit-michael Mar 3, 2023 Author

Replies: 3 comments 24 replies

zoltanszogyenyi
Dec 20, 2021
Maintainer

zoltanszogyenyi May 19, 2022
Maintainer

dawit-michael Mar 3, 2023
Author

dawit-michael Mar 3, 2023
Author