Is there any way this can used in a simple React app?

[RobertoGonzalez]

You can, though this version requires jQuery as a (rather unnecessary) global dependency. You should be able to run midnight on componentDidMount using a ref for the nav object without any significant issues, as long as the navigation doesn't have any complex behavior.

[ihatem]

Sorry to reopen this issue but is there anyway to use this with React the "react" way, without jQuery ?

I figured out how to make it work on React but I don't like jQuery.

Here's the code:

import React, {useRef, useEffect} from "react";
// some styling
import "./styles.sass";
// without jQuery it dosen't work
window.jQuery = require("jquery")
const midnight = require("midnight.js")

export default function App() {
  const ref = useRef(null); 

  useEffect(() => {
    // Not working with ref
    // ref.current.midnight()
    jQuery("#js-title").midnight()
  }, [])

  return (
    <div className="App">
      <div class="wrap">
        <h1 ref={ref} class="title" id="js-title">Fixed title</h1>
      </div>
      <div data-midnight="two" class="content content--two">
      </div>
      <div data-midnight="three" class="content content--three">
      </div>
    </div>
  );
}

I checked the source code, I think it's developed specifically for jQuery. Is there a known alternative for React ?

[RobertoGonzalez]

There's no alternative that I know of, but in the codebase jQuery is mostly being used for querying the DOM, so you should be able to strip it out of the codebase by replacing $() with document.querySelector() and making a few tweaks here and there. I'd be happy to accept a PR that makes Midnight work without jQuery. I hate it just as much.