I want to add a marquee to a ReactJS image using vanilla-marquee

Question

I found this package for React vanilla-marquee

I didn't find a lot of instructions. I took what I know and tried to make it work.

Here's my code:

import marquee from 'vanilla-marquee'

const element = 'text for the marquee. I want to know if it works.'
    
const SomeName = () => {
    new marquee(element, {
      delayBeforeStart: 500,
      direction: 'left',
      duplicated: true,
      gap: 20,
      pauseOnHover: false,
      startVisible: false,
      recalcResize: false,
    }); 
};
    
export default SomeName

The error states:

Uncaught Error: el cannot be just a selector
        at new marquee (vanilla-marquee.js:193:1)
        at SomeName (ticker.component.jsx:5:1)
        at renderWithHooks (react-dom.development.js:16300:1)
        at mountIndeterminateComponent (react-dom.development.js:20069:1)
        at beginWork (react-dom.development.js:21582:1)
        at HTMLUnknownElement.callCallback (react-dom.development.js:4159:1)
        at Object.invokeGuardedCallbackDev (react-dom.development.js:4209:1)
        at invokeGuardedCallback (react-dom.development.js:4272:1)
        at beginWork$1 (react-dom.development.js:27446:1)
        at performUnitOfWork (react-dom.development.js:26552:1)
    VM495 react_devtools_backend.js:4012 The above error occurred in the <SomeName> 
    component:

I appreciate any help.

Please post a minimal way to replicate this issue, use https://jsfiddle.net or the likes — painotpi, Dec 06 '22 at 04:34

Ken Y-N · Answer 1 · 2022-12-07T04:51:39.337

If you look at the example page source, you will see:

<h3 class="marquee marquee-1">Vanilla marquee is awesome!</h3>
...
<script type="module" defer>
import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee@1.1.2/dist/vanilla-marquee.js';

new marquee( document.querySelector( '.marquee-1' ) );
...

Also, in the source code:

if ( typeof el === 'string' )
  throw new Error( 'el cannot be just a selector' );

So, rather than a literal string, you need to have an HTML element like this or similar:

<p id='foobar'>text for the marquee. I want to know if it works.</p>
...
new marquee( document.getElementById('foobar'), <parameters>);

Update: If you want to do it all programmatically, I think this should suffice: - adapted from this answer with support from this meta question:

<script type="module">
import marquee from 'https://cdn.jsdelivr.net/npm/vanilla-marquee@1.1.2/dist/vanilla-marquee.js';

const element = 'text for the marquee. I want to know if it works.';
var htmlElement = document.createElement('h3');
htmlElement.innerHTML = element;
document.body.appendChild(htmlElement);
new marquee(htmlElement,
            {
                delayBeforeStart: 0,
                direction:        'left',
                speed:            200,
            });
</script>

I'm not sure of the best way to incorporate this into React, however... Perhaps just changing to import marquee from 'vanilla-marquee' would be enough?

Thanks, I have searched the documentation, followed examples, written a class component, and included the code above. I haven't figured it out yet. I appreciate your taking the time to answer. Do I need to edit the source code? If so, how do I do that? — terere, Dec 07 '22 at 03:28
OK, I've expanded the answer and added a runnable solution that should be very close to what is needed for React. — Ken Y-N, Dec 07 '22 at 04:56
I finally had a chance to get back to the the marquee. I now have a marquee. It has taken over the page. There's nothing else on the page ... but I have a marquee. Thank you. — terere, Dec 09 '22 at 23:50

score 0 · Answer 2 · edited Dec 14 '22 at 15:03

The following code will give you a marquee if anyone needs one. It will take up the entire page that you import it too. I'm sure there is a way to tame it, and I am looking for it. Wrapping it in a div didn't work.

import React from 'react';
import Marquee from 'vanilla-marquee'


Const element = 'Our World is changing. .... So is Therapy';
var htmlElement = document.createElement('h3');
htmlElement.innerHTML = element;
document.body.appendChild(htmlElement);
new Marquee(htmlElement,
        {
            delayBeforeStart: 0,
            direction:        'left',
            speed:            200,
            duplicated: true,
            gap: 20,
            height: 20,
            
        });


export default Marquee

I want to add a marquee to a ReactJS image using vanilla-marquee

2 Answers2