Installing FlipDown in a ReactJs Application #42

folego · 2022-05-02T02:50:48Z

I already installed the library using npm, but I can't access the FlipDown component.
I don't want to change the source code, but at the same time, I don't have much experience incorporating JS libraries in React code.

I tried the code below but doesn't work.

import FlipDown from 'flipdown';
import { FlipDown } from 'flipdown';

Is it possible to import and use the methods to start the counter?

PButcher · 2022-05-03T16:32:12Z

You can't yet import FlipDown in this way. You'll need to install the files yourself in your project directory and link to them inside the public/index.html in your React application as follows:

<!-- index.html -->
<head>
  <link rel="stylesheet" type="text/css" href="path/to/flipdown.css">
  <script type="text/javascript" href="path/to/flipdown.js"></script>
</head>

You'll then be able to access FlipDown globally with: FlipDown:

new FlipDown(1538137672).start();

You can create the element to attach FlipDown to from within your React application as long as you do not call the above code before that element is available.

Hope this helps.

CWSites · 2022-06-05T00:19:19Z

I've done as you explained however it still isn't working for me. I'm not getting any console errors however the counter is not showing up.

index.html

  <head>
    <link rel="stylesheet" href="./flipdown/flipdown.css" />
    <script href="./flipdown/flipdown.js"></script>
    <script type="text/javascript" href="./functions.js"></script>
  </head>
  <body>
    <!-- a bunch of other irrelevant code here -->
    <div id="flipdown" className="flipdown"></div>
  </body>

I included the JS to create a new function like this

functions.js

document.addEventListener("DOMContentLoaded", () => {
  new FlipDown(1656648119, {
    theme: "dark",
  })
    .start()
    .ifEnded();
});

What am I missing @PButcher?

PButcher · 2022-06-05T18:05:36Z

I've done as you explained however it still isn't working for me. I'm not getting any console errors however the counter is not showing up.

index.html

  <head>
    <link rel="stylesheet" href="./flipdown/flipdown.css" />
    <script href="./flipdown/flipdown.js"></script>
    <script type="text/javascript" href="./functions.js"></script>
  </head>
  <body>
    <!-- a bunch of other irrelevant code here -->
    <div id="flipdown" className="flipdown"></div>
  </body>

I included the JS to create a new function like this

functions.js

document.addEventListener("DOMContentLoaded", () => {
  new FlipDown(1656648119, {
    theme: "dark",
  })
    .start()
    .ifEnded();
});

What am I missing @PButcher?

In your HTML, change className to class? If it still doesn't show up and there aren't any errors, let me know.

CWSites · 2022-06-27T02:51:17Z

Thanks, I'll give it a try. I gave up on it for that project but will try doing it in a codepen to see if that works.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Installing FlipDown in a ReactJs Application #42

Installing FlipDown in a ReactJs Application #42

folego commented May 2, 2022 •

edited

Loading

PButcher commented May 3, 2022

CWSites commented Jun 5, 2022

PButcher commented Jun 5, 2022

index.html

functions.js

CWSites commented Jun 27, 2022

Installing FlipDown in a ReactJs Application #42

Installing FlipDown in a ReactJs Application #42

Comments

folego commented May 2, 2022 • edited Loading

PButcher commented May 3, 2022

CWSites commented Jun 5, 2022

index.html

functions.js

PButcher commented Jun 5, 2022

index.html

functions.js

CWSites commented Jun 27, 2022

folego commented May 2, 2022 •

edited

Loading