Skip to content
Luachliעברית

Add Shabbat times to React and Next.js

For sites you build yourself.

Steps

  1. Render a container element with a stable id.
  2. In a useEffect, create the script element, set src and the data- attributes, and append it to the container.
  3. Guard the effect so it appends once — in React's development Strict Mode the effect runs twice.

What usually goes wrong

dangerouslySetInnerHTML will not work. HTML inserted that way never executes script tags, so the snippet appears in the DOM and does nothing. The script element has to be created and appended.

Your code

<script src="https://luachli.com/widget.js" data-city="us/new-york-city" data-country="US" data-lang="en"></script>
Preview

That is the widget itself, running here — not a screenshot.

Other platforms