Tengo una aplicación de reacción que genera imágenes en el front-end dinámicamente usando Plotly.js . Me gustaría agregar la función de compartir imágenes. Estoy tratando de usar reaccionar-compartir para esto. Las plataformas sociales requieren URL de imagen para compartir imágenes y no admiten imágenes en codificación base64 o similar. Se implementó el backend para que pueda recibir imágenes en base64, almacenarlas en la base de datos y devolver la URL a la imagen, que luego se usa para compartir con react-share .
Como la imagen se genera dinámicamente (cambia cada vez que el usuario cambia el tamaño del gráfico, por ejemplo), todo debe hacerse cuando el usuario hace clic en el icono Compartir.
Entonces, después de que el usuario haya hecho clic en el ícono Compartir, la imagen generada en el front-end debe guardarse en el back-end
let imgURI; const handleClick = () => { Plotly.toImage('chartContainer', { format: 'png', width: 1000, height: 600 }) .then(dataUrl => api.post('/image/base64ToPng', { image: dataUrl }) .then( (response) => { imgURI = response.data.imgURI; }, failure => console.error(failure) )); };después de recibir la respuesta, se transmite al componente de uso compartido de esta manera
<FacebookShareButton url={imgURI} > <FacebookIcon/> </FacebookShareButton>El ejemplo de código no es asíncrono, por lo que el URI de la imagen no se pasa al componente de uso compartido, por lo que el uso compartido no funciona. Traté de pasar el accesorio usando condicional dependiendo de si está definido o no y no encontré una solución. También busqué algunos problemas en el repositorio de reaccionar-compartir que se ocupaban de las URL asíncronas, pero parece que ninguno de ellos se ocupa del intercambio dinámico de imágenes al hacer clic.
Apreciaría mucho una pista sobre cómo completar esta tarea.
Use navigator.share api si es posible.
Dicho esto, podría escribir un contenedor que administre el estado de carga y deshabilite el ícono del componente.
Crear un componente compartido asíncrono
//AsyncShareLoader.jsx const AsyncShareLoader = ({ url, children }) => { const loading = !url; return ( <div style={{ filter: `grayscale(${loading ? "100%" : "0%"}` }}> {React.Children.map(children, (child) => React.cloneElement(child, { disabled: loading, url: loading ? "none" : url, openShareDialogOnClick: !loading }) )} </div> ); };Ahora, use esto como un envoltorio para sus íconos reales de reacción y compartir. Algo como esto
const Share = () => { const [url, setUrl] = useState() useEffect(() => { fetch('/imgUrl').then(getUrlFromRes).then(setUrl) }, []) return ( <AsyncShareLoader url={url}> <FacebookShareButton> <FacebookIcon /> </FacebookShareButton> </AsyncShareLoader> ); }Al extender esta técnica, podría robar manualmente el clic como sugirió Andrew
Este es un territorio de pirateo serio, y todo sería mucho más simple si este PR se hubiera completado.
Sin embargo, el siguiente código debería funcionar (ver codesandbox ).
Los pasos clave son:
openShareDialogOnClick = false )onClick al botón de Facebook que obtiene la URL de forma asíncrona y establece el estado (activando una nueva representación)url prop) y luego restablezca la URL en "ninguno" import { useEffect, useRef, useState } from "react"; import { FacebookIcon, FacebookShareButton } from "react-share"; async function getUrFromService(): Promise<string> { // The real implementation would make a network call here. await new Promise((resolve) => setTimeout(resolve, 1000)); return "https://via.placeholder.com/150"; } export default function App() { const shareButton = useRef<HTMLButtonElement>(null); const [url, setUrl] = useState<string>("none"); // Unfortunately, we have to have a dummy string here, or FacebookShareButton will blow up. // Provide an onClick handler that asyncronously fetches the url and sets it in the state. const onClick = async () => { // Be sure to check for the "none" state, so we don't trigger an infinite loop. if (url === "none") { const newUrl = await getUrFromService(); setUrl(newUrl); } }; // Whenever "url" changes and we re-render, we manually fire the click event on the button, and then re-set the url. useEffect(() => { if (url !== "none") { shareButton.current?.click(); setUrl("none"); } }, [url, shareButton]); return ( <FacebookShareButton ref={shareButton} // Disable calling the dialog if we don't have a url yet. openShareDialogOnClick={url !== "none"} url={url} onClick={onClick} > <FacebookIcon /> </FacebookShareButton> ); }