how to use marquee tag . its not supporting html tag in ReactJS. I have tried to import react-text-marquee still style is not reflecting
public render(): React.ReactElement<IScrollTickerWebPartProps> { return ( <div className={styles.panelStyle} > <br></br> <Marquee text="swetha">Test</Marquee> <br></br> <div className={styles.tableStyle} > {this.state.items.map(function(item,key){ return (<div className={styles.rowStyle} key={key}> <div className={styles.CellStyle}>{item.Title}</div> </div>); })} </div> </div> ); }4 Answers
In React Js, html marquee tag works. You don't need to import any component.
Example
public render(): React.ReactElement<IScrollTickerWebPartProps> { return ( <div className={styles.panelStyle} > <br></br> <marquee style={{ color: 'red', fontSize: '3em' }}>Test</marquee> <br></br> <div className={styles.tableStyle} > {this.state.items.map(function(item,key){ return (<div className={styles.rowStyle} key={key}> <div className={styles.CellStyle}>{item.Title}</div> </div>); })} </div> </div> ); }Really simple fix; you've used a capital M in "Marquee". As a result of this, React is attempting to find a component called Marquee and failing. Simply change that to a little m, remove your prop and you'll be golden.
Example:
class Hello extends React.Component { render() { return ( <marquee>Test</marquee> ) }
}
ReactDOM.render( <Hello />, document.getElementById('container')
);Bear in mind, the marquee tag is now obsolete and you should refrain from using it where possible: .
Note − The tag deprecated in HTML5. Do not use this element, instead you can use JavaScript and CSS to create such effects.
If you try to use it, you will get this warning in typescript
Property 'marquee' does not exist on type 'JSX.IntrinsicElements'Easiest way is to use react-ticker. in your case you could create a component
import Ticker from "react-ticker"
const Marquee = ({children}) => { return ( // wrap it to controll css better <div> <Ticker offset={80}> { () => <div > {children} </div> } </Ticker> </div> )
}use it anywhere you need like this:
<Marquee> {this.state.items.map(function (item, key) { return ( <div className={styles.rowStyle} key={key}> <div className={styles.CellStyle}>{item.Title}</div> </div> ); })}
</Marquee>;You can just use the HTML marquee like this:
<marquee behavior='scroll' scrollamount='20' width='50%' direction='right' height='50px' > this is a news flash....
</marquee>
