flipdown
flipdown copied to clipboard
PButcher
Installing FlipDown in a ReactJs Application
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?
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.
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?
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.
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.