Handle renderCusdis in SPA #37
Comments
|
I'm handling the issue, today with the In my case use a useScript to wait the script loaded and do render for each change page. When change pass the ref of the cudis widget in the import { useEffect, useRef } from "react";
import Section from "aura-design/section";
import { useScript } from "@utils/useScript";
const ArticleComment = ({ title, id, uid, path }) => {
const { loaded, error } = useScript("https://cusdis.com/js/cusdis.es.js");
const cudis = useRef(null);
useEffect(() => {
if (loaded) {
window.renderCusdis(cudis.current);
}
}, [id]);
if (error) {
return <></>;
}
return (
<Section container="smash">
<h3>Cajita de comentarios</h3>
<div
id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id={{ MY_ID }}
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
ref={cudis}
/>
</Section>
);
}; |
|
Have you tried using |
|
Yes, i try with it, and still happening the issue. useLayoutEffect(() => {
if (loaded) {
window.renderCusdis(cudis.current);
}
}, [id]);The html in the page: |
|
It seems that Svelte would append the element again in the https://github.com/djyde/cusdis/blob/master/widget/index.js#L6 Maybe we should clear the target before mounting to the target: function render(target) {
if (target) {
+ target.innerHTML = ''
new Widget({
target,
props: {
attrs: target.dataset,
},
});
}
} |
|
Oh, ok 👌 It should work. Thank you |
|
It is working for me now. https://garitma.com/poemas/huele-a-deseo import { useLayoutEffect, useRef } from "react";
import Section from "aura-design/section";
import { useScript } from "@utils/useScript";
const ArticleComment = ({ title, id, uid, path }) => {
const { loaded, error } = useScript("https://cusdis.com/js/cusdis.es.js");
const cudis = useRef(null);
useLayoutEffect(() => {
if (loaded) {
cudis.current.innerHTML = "";
window.renderCusdis(cudis.current);
}
}, [id]);
if (error) {
return <></>;
}
return (
<Section container="smash">
<h3>Cajita de comentarios</h3>
<div
id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id={{ MY_ID }}
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
ref={cudis}
/>
</Section>
);
};
export default ArticleComment; |
|
@pablopvsky Cool!
Maybe I should improve the CSS part 🤣 I am not an CSS expert. |
|
i can help with it, i am thinking how can be the best way and do a pr of it 😬 |
|
@pablopvsky That's great! I opened another issue for CSS issues #39 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@pablopvsky Thank you! I think the Docsify plugin implementation would help you
https://github.com/djyde/cusdis/blob/master/public/js/cusdis.docsify.js#L33
I expose a
renderCusdismethod onwindowso that the SPA can call it to rerender the widget (Sorry I didn't mention it on the JS SDK document):https://github.com/djyde/cusdis/blob/master/widget/index.js#L15
Originally posted by @djyde in #22 (comment)
The text was updated successfully, but these errors were encountered: