CODEWITHSUNDEEP
javascriptreactjs
RRR uzumaki
RRR uzumaki

Reputation: 1328

React load script on specfic div

I need to load a script on specific component in my React app. Below is my script and i need this to load on bottom-most div in my component

<div id="rexxxx"></div>
<script>

new carouselInlineWidget("xx", {
  /*Your REVIEWS.io account ID:*/
  store: "xxxxxxxxxxxx",
  sku: "",
  lang: "en",
  carousel_type: "xxxxx",
  styles_carousel: "CarouselWidget--xxxxxx",

  /*Widget settings:*/
  options: {
    general: {
      /*What reviews should the widget display? Available options: company, product, third_party. You can choose one type or multiple separated by comma.*/
      enable_auto_scroll: 10000,
    },
    header: {
   
    },
    reviews: {
    
     
    },
    popups: {},
  },
  styles: {
    
  },
});
</script>

I have my React component

import React from 'react'
import edenredLogo from '../../images/edenred-logo.webp'
import { useHistory } from 'react-router-dom'
import { useSelector } from 'react-redux'
import './landing.less'

const Landing = () => {
  const history = useHistory()


  return (
    <>

<div className="script-here"/>

    </>
  )
}

export default Landing

Upvotes: 1

Views: 220

Answers (1)

Volodymyr Zelenyi
Volodymyr Zelenyi

Reputation: 316

You can use the custom hook:

import { useEffect } from 'react';

const useScript = (url, position, async = true) => {
  useEffect(() => {
    const placement = document.querySelector(position);
    const script = document.createElement('script');

    script.src = url;
    script.async = typeof async === 'undefined' ? true : async;

    placement.appendChild(script);

    return () => {
      placement.removeChild(script);
    };
  }, [url]);
};

export default useScript;

Usage:

useScript(url, ".script-here");

Or just use dangerouslySetInnerHTML

<div className="script-here" dangerouslySetInnerHTML={{__html: your_script}} />

Upvotes: 1

Related Questions