0

I am using the modal library winbox. It works well if use simple html and javascript. But I can't append a React node to it.

The modal has a html parameter, that accept an html string such as div.innerHTML = <div>hello</div> . The code source is: this.body.innerHTML = html;.

So adding a classic React element makes the modal crash. The only solution I found is to use react-dom's renderToString method: html: renderToString(children). But the component is not dynamic anymore (no state update, etc.).

I also tried to surround React.renderDOM by a div inside the modal and attach the component to it, as the app is attached to index.js's #root div.

  html: <div id="modal">
          {render(
          <div children={content} />,
          document.querySelector("#modal")
        )},
          </div>

My question is thus: how to pass a dynamic React component to the body of this modal?

Here is my code:

import React from "react";
import useModal from "./useModal";

const Counter = () => {
  const [count, setCount] = useState(1);
  return (
    <div>
      The count is {count}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
};
export default function App() {
  const [open, setOpen] = useState(false);
  useModal(open, setOpen, <Counter />);

  return (
    <div id="#hi">
      <button onClick={() => setOpen(!open)}>toggle</button>
    </div>
  );
}


// useModal
import WinBox from "winbox/src/js/winbox.js";
import "winbox/dist/css/winbox.min.css";
import React from "react";
import { render } from "react-dom";
export default function useModal(open, onToggle, content) {
  const modal = open
    ? new WinBox({
        title: "Hello",
        max: true,
        html: content, // INSERT DYNAMIC COMPONENT HERE
        onclose: () => onToggle(false)
      })
    : null;
  return modal;
}

Thank you!

DoneDeal0
  • 5,273
  • 13
  • 55
  • 114
  • 1
    Honestly, I'd just ditch WinBox in favour of something designed to work with React. [There are plenty](https://blog.logrocket.com/top-react-modal-components-for-2021/). – Quentin Apr 20 '21 at 10:47
  • I actually use winbox because it handles fullscreen, resizing, minification, auto-positionning of minified modals at the bottom of the screen, and multiple instances. All these libs are just classic modals with a backdrop. I could make my own instead. – DoneDeal0 Apr 20 '21 at 11:56

1 Answers1

0

You can use winbox-react package from npm. winbox-react npm link Example code is given below. Youcan use normal jsx as children of the WinboxReact component.

const Hero = () => {
const [show, setShow] = useState(false)
const clickHandeler = () => {
  setShow(!show)
}

return (
  <div className='text-center'>
    {show && (
      <WinboxReact
        onClose={clickHandeler}
        background='linear-gradient(90deg, rgba(49,36,239,1) 0%, rgba(67,0,168,1) 100%)'
      ><h1>Hello</h1></WinboxReact>
    )}
    <button onClick={clickHandeler} className='btn btn-custom btn-lg mt-4'>
      Show Example
    </button>
  </div>
)
}

export default Hero
Tanvir Mahin
  • 78
  • 6
  • Sharing just a link may help but is not preferable as links may remove in future. Sharing some codes and examples along your answer will increase the quality of your answer. – Pouria Moosavi May 16 '21 at 07:10