0
263
VistasCódigos qr con estilo en las opciones de selección de reacción
Necesito crear react-select donde cada opción tiene un código qr de estilo diferente con la biblioteca js: qr-code-styling.
El problema es que en la documentación, el código qr se agrega a los elementos dom, y las opciones en react-select se crean dinámicamente. No puedo encontrar una manera de agregar estos códigos qr a mis opciones. Creo que el problema es que no puedo crear referencias correctamente, que puedo usar para aplicar los códigos. ¿Hay alguna forma de hacerlo?
import React, { useEffect, useRef, createRef } from "react"; import "./styles.css"; import QRCodeStyling from "qr-code-styling"; import Select from "react-select"; const qrCode = new QRCodeStyling({ data: "https://qr-code-styling.com", width: 300, height: 300, image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg", dotsOptions: { color: "#4267b2", type: "rounded" }, imageOptions: { crossOrigin: "anonymous", margin: 20 } }); const qrCode2 = new QRCodeStyling({ data: "https://qr-code-styling.com", width: 50, height: 50, image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg", dotsOptions: { color: "red", type: "rounded" }, imageOptions: { crossOrigin: "anonymous", margin: 20 } }); const data = [ { id: "1", qrcode: qrCode }, { id: "2", qrcode: qrCode2 } ]; export default function App() { let refs = useRef([createRef(), createRef()]); const optionLabel = (option, index) => <div ref={refs.current[option.id]} />; useEffect(() => { refs.current.forEach((ref) => qrCode.append(ref.current)); }, []); return ( <div className="App"> <Select className="select-logo" getOptionLabel={optionLabel} options={data} /> </div> ); }1 Respuestas
Responde la pregunta0
Una solución sería hacer que Select le informe cuándo agregar los códigos QR, utilizando su accesorio onMenuOpen . Primero, sin embargo, debemos poder encontrar el elemento para agregar, por lo que debemos agregar un formatOptionLabel (que es lo que sospecho que quiso usar, en lugar de getOptionLabel en su sandbox):
<Select formatOptionLabel={({ id }) => <div id={`qr-code-option-${id}`} />} ...etc />Luego, podemos agregar una variable de estado para que se active cuando se cargue el menú:
const [menuIsOpen, setMenuIsOpen] = React.useState(false)y, cuando el menú esté abierto, agregue las opciones a sus qrCodes:
useEffect(() => { data.forEach(d => { let o = document.getElementById('qr-code-option-' + d.id) if (o) { d.qrcode?.append(o) } }) }, [menuIsOpen]) Finalmente, usamos los apoyos onMenuOpen y onMenuClose para activar los cambios de estado, lo que da como resultado el resultado deseado. El código completo del componente de la aplicación es ahora:
export default function App() { const [menuIsOpen, setMenuIsOpen] = React.useState(false) useEffect(() => { data.forEach(d => { let o = document.getElementById(`qr-code-option-${d.id}`) if (o) { d.qrcode?.append(o) } }) }, [menuIsOpen]) return ( <div className="App"> <Select className="select-logo" formatOptionLabel={({ id }) => <div id={`qr-code-option-${id}`} />} onMenuOpen={() => setMenuIsOpen(true)} onMenuClose={() => setMenuIsOpen(false)} options={data} /> </div> ); }lo que da:
