Hi, I am trying to add a custom toggle button to the header in Webviewer to show/hide all annotations.
But I am facing some issues here.
Code snippet :
const PDFViewer: React.FC<InputProps> = props => {
const [isToggled, setToggled] = useState(false);
const viewerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
viewer(
{
path: PATH
},
viewerRef.current as HTMLDivElement
).then(instance => {
const { annotManager } = instance;
instance.setHeaderItems(header => {
header.push({
type: "toggleElementButton",
img: <svg>SVG Icon </svg>,
title: "Show Annotations",
onClick: async () => {
setToggled(!isToggled);
const allAnnots = annotManager.getAnnotationsList();
if (isToggled == true) {
annotManager.showAnnotations(allAnnots);
} else {
annotManager.hideAnnotations(allAnnots);
}
}
});
});
});
}, [isToggled]);
-
When I set type as “toggleElementButton” I am unable to execute the onClick action but I can when I use the “actionButton” type. Is there a way to perform onClick action for Toggle Button?
-
When I add
isToggled
to the dependency array, it throws an error
Two instances of WebViewer were created on the same HTML element. Please create a new element for each instance of WebViewer Error
Can you please provide a sample code or suggestion for the same?
Thanks