0
268
ViewsStyled qr codes in react select options
I need to create react-select where every option is different styled qr code with js library: qr-code-styling.
The problem is that in documentation qr code are appended to dom elements, and options in react-select are created dynamically. I can't find a way to append these qr codes to my options. I think the problem is that, I can't properly create refs, which I can use to apped the codes. Is there any way to do it?
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 answers
Answer question0
One solution would be to have the Select let you know when to append the QR codes, by using its onMenuOpen prop. First, though, we need to be able to find the element to append, so we need to add a formatOptionLabel (which is what I suspect you meant to use, instead of getOptionLabel in your sandbox):
<Select
formatOptionLabel={({ id }) => <div id={`qr-code-option-${id}`} />}
...etc
/>
Then, we can add a state variable to be triggered when the menu loads:
const [menuIsOpen, setMenuIsOpen] = React.useState(false)
and, when the menuIsOpen, append the options to their qrCodes:
useEffect(() => {
data.forEach(d => {
let o = document.getElementById('qr-code-option-' + d.id)
if (o) {
d.qrcode?.append(o)
}
})
}, [menuIsOpen])
Finally, we use the onMenuOpen and onMenuClose props to trigger the state changes, resulting in the desired result! The full code of the App component is now:
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>
);
}
which gives:
