search

christo-pr / dangerously-set-html-content

Render raw html at your own risk! v2
60 stars 8 forks source link

Not Rerun the script when route to another page and come back, need to reload the page manully. #8

Closed milon27 closed 12 months ago

milon27 commented 1 year ago 
import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom'
import { innerHtml } from './innerHtml'
import InnerHTML from 'dangerously-set-html-content'

const Home = () => {
    const nav = useNavigate()
    return <h1>Home page
        <InnerHTML html={innerHtml} />
        <button onClick={() => {
            nav('/about')
        }}>go about</button>
    </h1>
}
const About = () => {
    return <h1>About page</h1>
}
const NotFound = () => {
    return <h1>404 page</h1>
}

export default function Router() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/' element={<Home />} />
                <Route path='/about' element={<About />} />
                <Route path='*' element={<NotFound />} />
            </Routes>
        </BrowserRouter>
    )
}

so in home page in load the instagram embed js

image

but when i go to about page and come back its not loading, only load when i reload the page. image

christo-pr commented 1 year ago

Hi @milon27 ooh that's weird, what version are you running? was this happening before or just start to happen? I think I have an idea why this is happening now, but want to make sure

milon27 commented 1 year ago

Hi @christo-pr version: "dangerously-set-html-content": "^1.0.13",

i found your library yesterday.

milon27 commented 1 year ago

this is the content i was trying to load after changing route

export const innerHtml = `

<p><a href="http://indozone.id/tag/nia-ramadhani" target="_blank">Nia Ramadhani</a> melakukan sesi pemotretan dengan gaya busana gaun cantik membentuk tubuh. Hasilnya&nbsp;berhasil menarik perhatian publik.</p>

 <p>Artis cantik, Nia Ramadhani tampil sangat anggun dalam balutan<a href="http://indozone.id/tag/outfit" target="_blank"> outfit</a> gaun hitam. Dengan detail payet di bagian atas dan tali pundak.</p>

 <p><strong>Baca Juga: </strong><a href="https://www.indozone.id/beauty/8JsamOP/potret-ayu-dewi-nagita-luna-maya-nia-ramadhani-main-tenis-bareng-netizen-atm-berjejer">Potret Ayu Dewi, Nagita, Luna Maya, Nia Ramadhani Main Tenis Bareng, Netizen: ATM Berjejer</a></p>

 <p>Ditambah juga aksen belahan di area dada yang menambah keseksiannya. Lekuk tubuhnya bikin salfok mata netizen.</p>

 <p>Tak lupa, Nia Ramadhani terlihat glamor dengan riasan <a href="http://indozone.id/tag/makeup" target="_blank">makeup</a> bold nih.</p>

 <div data-oembed-url="https://www.instagram.com/p/ClLL0yAvGqo/ ">
 <blockquote class="instagram-media" data-instgrm-captioned="" data-instgrm-permalink="https://www.instagram.com/p/ClLL0yAvGqo/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="14" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
 <div style="padding:16px;">
 <div style=" display: flex; flex-direction: row; align-items: center;">
 <div style="background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 40px; margin-right: 14px; width: 40px;">&nbsp;</div>

 <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center;">
 <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 100px;">&nbsp;</div>

 <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 60px;">&nbsp;</div>
 </div>
 </div>

 <div style="padding: 19% 0;">&nbsp;</div>

 <div style="display:block; height:50px; margin:0 auto 12px; width:50px;"><a href="https://www.instagram.com/p/ClLL0yAvGqo/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank"><svg height="50px" version="1.1" viewbox="0 0 60 60" width="50px" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"><g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g fill="#000000" transform="translate(-511.000000, -20.000000)"><g><path d="M556.869,30.41 C554.814,30.41 553.148,32.076 553.148,34.131 C553.148,36.186 554.814,37.852 556.869,37.852 C558.924,37.852 560.59,36.186 560.59,34.131 C560.59,32.076 558.924,30.41 556.869,30.41 M541,60.657 C535.114,60.657 530.342,55.887 530.342,50 C530.342,44.114 535.114,39.342 541,39.342 C546.887,39.342 551.658,44.114 551.658,50 C551.658,55.887 546.887,60.657 541,60.657 M541,33.886 C532.1,33.886 524.886,41.1 524.886,50 C524.886,58.899 532.1,66.113 541,66.113 C549.9,66.113 557.115,58.899 557.115,50 C557.115,41.1 549.9,33.886 541,33.886 M565.378,62.101 C565.244,65.022 564.756,66.606 564.346,67.663 C563.803,69.06 563.154,70.057 562.106,71.106 C561.058,72.155 560.06,72.803 558.662,73.347 C557.607,73.757 556.021,74.244 553.102,74.378 C549.944,74.521 548.997,74.552 541,74.552 C533.003,74.552 532.056,74.521 528.898,74.378 C525.979,74.244 524.393,73.757 523.338,73.347 C521.94,72.803 520.942,72.155 519.894,71.106 C518.846,70.057 518.197,69.06 517.654,67.663 C517.244,66.606 516.755,65.022 516.623,62.101 C516.479,58.943 516.448,57.996 516.448,50 C516.448,42.003 516.479,41.056 516.623,37.899 C516.755,34.978 517.244,33.391 517.654,32.338 C518.197,30.938 518.846,29.942 519.894,28.894 C520.942,27.846 521.94,27.196 523.338,26.654 C524.393,26.244 525.979,25.756 528.898,25.623 C532.057,25.479 533.004,25.448 541,25.448 C548.997,25.448 549.943,25.479 553.102,25.623 C556.021,25.756 557.607,26.244 558.662,26.654 C560.06,27.196 561.058,27.846 562.106,28.894 C563.154,29.942 563.803,30.938 564.346,32.338 C564.756,33.391 565.244,34.978 565.378,37.899 C565.522,41.056 565.552,42.003 565.552,50 C565.552,57.996 565.522,58.943 565.378,62.101 M570.82,37.631 C570.674,34.438 570.167,32.258 569.425,30.349 C568.659,28.377 567.633,26.702 565.965,25.035 C564.297,23.368 562.623,22.342 560.652,21.575 C558.743,20.834 556.562,20.326 553.369,20.18 C550.169,20.033 549.148,20 541,20 C532.853,20 531.831,20.033 528.631,20.18 C525.438,20.326 523.257,20.834 521.349,21.575 C519.376,22.342 517.703,23.368 516.035,25.035 C514.368,26.702 513.342,28.377 512.574,30.349 C511.834,32.258 511.326,34.438 511.181,37.631 C511.035,40.831 511,41.851 511,50 C511,58.147 511.035,59.17 511.181,62.369 C511.326,65.562 511.834,67.743 512.574,69.651 C513.342,71.625 514.368,73.296 516.035,74.965 C517.703,76.634 519.376,77.658 521.349,78.425 C523.257,79.167 525.438,79.673 528.631,79.82 C531.831,79.965 532.853,80.001 541,80.001 C549.148,80.001 550.169,79.965 553.369,79.82 C556.562,79.673 558.743,79.167 560.652,78.425 C562.623,77.658 564.297,76.634 565.965,74.965 C567.633,73.296 568.659,71.625 569.425,69.651 C570.167,67.743 570.674,65.562 570.82,62.369 C570.966,59.17 571,58.147 571,50 C571,41.851 570.966,40.831 570.82,37.631"></path></g></g></g></svg></a></div>

 <div style="padding-top: 8px;">
 <div style=" color:#3897f0; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:550; line-height:18px;"><a href="https://www.instagram.com/p/ClLL0yAvGqo/?utm_source=ig_embed&amp;utm_campaign=loading" style=" background:#FFFFFF; line-height:0; padding:0 0; text-align:center; text-decoration:none; width:100%;" target="_blank">View this post on Instagram</a></div>
 </div>

 <div style="padding: 12.5% 0;">&nbsp;</div>

 <div style="display: flex; flex-direction: row; margin-bottom: 14px; align-items: center;">
 <div>
 <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(0px) translateY(7px);">&nbsp;</div>

 <div style="background-color: #F4F4F4; height: 12.5px; transform: rotate(-45deg) translateX(3px) translateY(1px); width: 12.5px; flex-grow: 0; margin-right: 14px; margin-left: 2px;">&nbsp;</div>

 <div style="background-color: #F4F4F4; border-radius: 50%; height: 12.5px; width: 12.5px; transform: translateX(9px) translateY(-18px);">&nbsp;</div>
 </div>

 <div style="margin-left: 8px;">
 <div style=" background-color: #F4F4F4; border-radius: 50%; flex-grow: 0; height: 20px; width: 20px;">&nbsp;</div>

 <div style=" width: 0; height: 0; border-top: 2px solid transparent; border-left: 6px solid #f4f4f4; border-bottom: 2px solid transparent; transform: translateX(16px) translateY(-4px) rotate(30deg)">&nbsp;</div>
 </div>

 <div style="margin-left: auto;">
 <div style=" width: 0px; border-top: 8px solid #F4F4F4; border-right: 8px solid transparent; transform: translateY(16px);">&nbsp;</div>

 <div style=" background-color: #F4F4F4; flex-grow: 0; height: 12px; width: 16px; transform: translateY(-4px);">&nbsp;</div>

 <div style=" width: 0; height: 0; border-top: 8px solid #F4F4F4; border-left: 8px solid transparent; transform: translateY(-4px) translateX(8px);">&nbsp;</div>
 </div>
 </div>

 <div style="display: flex; flex-direction: column; flex-grow: 1; justify-content: center; margin-bottom: 24px;">
 <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; margin-bottom: 6px; width: 224px;">&nbsp;</div>

 <div style=" background-color: #F4F4F4; border-radius: 4px; flex-grow: 0; height: 14px; width: 144px;">&nbsp;</div>
 </div>

 <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;"><a href="https://www.instagram.com/p/ClLL0yAvGqo/?utm_source=ig_embed&amp;utm_campaign=loading" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none;" target="_blank">A post shared by Nia Ramadhani Bakrie (@ramadhaniabakrie)</a></p>
 </div>
 </blockquote>
 <script async="" src="https://www.instagram.com/embed.js"></script></div>

 <p>Potret ini menuai banyak pujian karena penampilan Nia yang memukau!</p>

 <blockquote>
 <p>&quot;kaya model international&quot; @s_u_c_i_e_</p>
 </blockquote>

 <blockquote>
 <p>&quot;Cantik banget ibu&quot; @nuraeniumi1801</p>
 </blockquote>

 <blockquote>
 <p>&quot;Cantiqqq bangettttt&quot; @niaisyani</p>
 </blockquote>

 <blockquote>
 <p>&quot;Mirip Kendal Jenner,&quot; kata sherly***</p>
 </blockquote>

 <h3><strong>Penulis: Mita Suciana Romi</strong></h3>

 <h3><strong>Artikel Menarik Lainnya: </strong></h3>

 <ul>
    <li><a href="https://www.indozone.id/beauty/zosvx5k/nia-ramadhani-pose-angkat-tangan-tampilannya-mahal-cocok-gabung-blackpink">Nia Ramadhani Pose Angkat Tangan Tampilannya Mahal: Cocok Gabung BLACKPINK</a></li>
    <li><a href="https://www.indozone.id/beauty/8Jsae8p/viral-gaya-asik-nia-ramadhani-joget-bareng-mikhayla-netizen-makin-tua-makin-muda">Viral Gaya Asik Nia Ramadhani Joget Bareng Mikhayla, Netizen: Makin Tua Makin Muda</a></li>
    <li><a href="https://www.indozone.id/beauty/M7skOxZ/gaya-nia-ramadhani-pakai-crop-top-saat-lari-di-gbk-netizen-bilang-mirip-najwa-shihab">Gaya Nia Ramadhani Pakai Crop Top saat Lari di GBK, Netizen Bilang Mirip Najwa Shihab!</a></li>
 </ul>
 `
christo-pr commented 1 year ago

@milon27 I don't think is an issue with the content, we just release this change a day before you install this lib, so I think that may have cause this issue, for testing, you can try with version v1.0.12 and see if that works? if that does the trick, can you please mark this issue as resolved, so that I can rollback that change

milon27 commented 1 year ago

ok i will check and let you know here @christo-pr

milon27 commented 1 year ago

I have checked, it's still not working with react-router-dom. when I go to some other route and come back the script doesn't execute. i think its still do the network request or loads the script but it doesn't execute[not really sure about it].

christo-pr commented 1 year ago

@milon27 it's really weird, the lib doesn't do anything fancy regarding the token, if the it is making the network request it should execute the JS too. I'll try to replicate and come with a solution, but feel free to open a PR if you find a solution

milon27 commented 1 year ago

@christo-pr thank you I will also try to find some solution. and update here if i found any.

milon27 commented 1 year ago

@christo-pr did not found the solution , let me know if you found any thanks

abosio commented 1 year ago

We just added this package and are having the same problem. Version is ^1.0.13.

christo-pr commented 1 year ago

Hi @abosio I'll need more explanation of your issue, as for the problem for this issue, I think, based on the screenshot, the script is beign executed (otherwise he wont get the loading screen from instagram) so I think is very likely a render issue and how that affects the JS that you inject, I would suggest to render the content after this first render of the component, maybe that could work (you could use useRef for that), but please share more info

abosio commented 1 year ago

@christo-pr Sorry. The content I'm using in the html prop of InnerHTML does not update when I switch routes. I can see with console logging that the value of the content variable is changing. This is just test pages with no script tag within the content yet. No memoization happening. The content variable is from useState and setVariable is called to update it when new content is fetched after the route change. If I click to a route not using this at all, then I can click to a different page its content renders. But if I click only between pages (same component), then the content does not change.

Here I've added reduced the problem to just a button which sets new html in the content variable and clicking it still does not update what is rendered by InnerHTML. Shows "foo" initially, won't change when button is clicked.

const [content, setContent] = useState("foo");
...
<Button onClick={()=>setContent('<strong>hello world</strong>')}>Hello World</Button>
<div><InnerHTML html={content} />}</div>
christo-pr commented 1 year ago

Yeah like I've mention, a render issue, we don't do any fancy cleanup or anything like that, I would suggest to unmount and mount the component instead of trying to make it work in a reactive way, once you render something with this component all the content/js inside of this, lose all the "react" stuff, so this could lead to unexpected issues.

Also the code you shared look pretty much like the example, and it does work:

image
christo-pr commented 12 months ago

Latest version (1.1.0) should allow rerender the component if a prop is passed in. I'm hoping this will fix any issue related to this ^^