chore: upd sandbox to use createPortal

test/sandbox.jsx

@@ -1,11 +1,41 @@
-import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { createPortal } from 'react-dom'
+import React, { useState } from 'react'
 import Swal from 'sweetalert2/dist/sweetalert2.all'
 import withReactContent from '../src/index'
+import { DayPicker } from 'react-day-picker'
+import 'react-day-picker/dist/style.css'
 
 let MySwal = withReactContent(Swal)
 
-MySwal.fire({
- icon: 'success',
- title: <i>Test</i>,
- html: <i>Hello World</i>,
-})
+function App() {
+ const [swalShown, setSwalShown] = useState(false)
+ const [inputValue, setInputValue] = useState('')
+
+ function showSwal() {
+ MySwal.fire({
+ didOpen: () => setSwalShown(true),
+ didClose: () => setSwalShown(false),
+ confirmButtonText: <i>Submit</i>,
+ })
+ }
+
+ return (
+ <>
+ <button onClick={() => showSwal()}>show swal</button>
+ {swalShown && (
+ <>
+ {createPortal(inputValue, Swal.getTitle())}
+ {createPortal(
+ <input className="swal2-input" value={inputValue} onChange={(e) => setInputValue(e.target.value)} />,
+ Swal.getHtmlContainer()
+ )}
+ {createPortal(inputValue.length, Swal.getFooter())}
+ </>
+ )}
+ <div>input value: {inputValue}</div>
+ </>
+ )
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)