Custom Toggle button to show/hide Annotations

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]);
  1. 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?

  2. 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

Hello, I’m Ron, an automated tech support bot :robot:

While you wait for one of our customer support representatives to get back to you, please check out some of these documentation pages:

Guides:APIs:Forums:

  1. Currently there is not support for onClick action for Toggle Button.

  2. It looks like you are recreating the WebViewer instance over and over, and the error message also describing the issue. Reactjs hooks setToggled(!isToggled) is probably cause to the component to update and create new instance of WebViewer. I’ll recommend reviewing out reactjs sample here and possible remove setToggled(!isToggled) and see if this is causing this issue

Hi, Thanks for the response.

I tried using a statefulButton instead. From the examples given in the documentation, but I am unable to figure out how to update the state in my case.
The example mentioned in the documentation uses static events for eg: FIT_MODE_UPDATED
in the update function.

Here is my code snippet

instance.setHeaderItems(header => {
                header.push({
                    type: "statefulButton",
                    initialState: "Show",
                    states: {
                        Show: {
                            img: SHOW_ANNOTATIONS_ICON,
                            onClick: () => {
                                let AllAnnotations = instance.annotManager.getAnnotationsList();
                                instance.annotManager.showAnnotations(AllAnnotations);
                            },
                        },
                        Hide: {
                            img: HIDE_ANNOTATIONS_ICON,
                            onClick: () => {
                                let AllAnnotations = instance.annotManager.getAnnotationsList();
                                instance.annotManager.hideAnnotations(AllAnnotations);
                            },
                        }
                    },
                    //***How to change state of the button in an update function for show/hide?***
                    dataElement: 'showAnnotationButton'
                });
            });

Any suggestion on How can I update a custom statefulButton to switch between show/hide?
Thanks