Как добавить виджет vk для сайта на react?

Question

[ksntheia]

Как подключить виджет vk на сайт на React?
Понятно, как добавить подключение openapi.js и код для его инициализации.
Но как поступать дальше, непонятно. Данный код, вставленный в react компонент, вызывает ошибку Cannot find name 'mode'

<div id="vk_groups"></div>
<script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 0, width: "220", height: "400"}, 1);
</script>

Answer 1

[Семён Федосеев]

Любой подобный скрипт следует инициализировать в хуке useEffect.
Для того, чтобы встроить полученный модуль в элемент div, необходимо воспользоваться хуком useRef.
Это будет выглядеть, примерно, следующим образом:

import {VK} from "vk"

const Component = () => {
const vkRef = useRef(null);

useEffect(() => {
  if (vkRef.current) {
    VK.Widgets.Group(vkRef.current, {mode: 0, width: "220", height: "400"}, 1);
  }
}, [vkRef])

return <div ref={vkRef}></div>
}

Доработайте код, по-необходимости.