How to Remove "Match Any Word" From the Search in React PDF Viewer?

3 mins read

Description:

This guide outlines the steps to customize your PDF Viewer and remove the "Match Any Word" option from the search in React PDF Viewer.

Solution:

To hide the “Match Any Word” option in the PDF Viewer, use JavaScript to locate the checkbox container by its class (e.g., .e-pv-match-any-word) and set its style.display property to none. This will effectively remove the option from view.

Code Snippets:

index.js:

function Default() {
  let viewer;
  function documentLoaded() {
    var searchDialog = document.getElementById('container_search');
    searchDialog.addEventListener('click', searchDialogOpened);
  }
  function searchDialogOpened() {
    var saveAsButtonWrapper = document.querySelector(
      '.e-checkbox-wrapper.e-wrapper.e-pv-match-any-word'
    );
    if (saveAsButtonWrapper) {
      var checkbox = saveAsButtonWrapper.querySelector(
        'input[type="checkbox"]'
      );
      if (checkbox) {
        checkbox.style.display = 'none';
      }
      saveAsButtonWrapper.style.display = 'none';
    }
  }
  return (
    <div>
      <div className="control-section">
        {/* Render the PDF Viewer */}
        <PdfViewerComponent
          ref={(scope) => {
            viewer = scope;
          }}
          id="container"
          documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
          resourceUrl="https://cdn.syncfusion.com/ej2/23.2.6/dist/ej2-pdfviewer-lib"
          style={{ height: '640px' }}
          documentLoad={documentLoaded}
        >
          <Inject
            services={[
              Toolbar,
              Magnification,
              Navigation,
              LinkAnnotation,
              BookmarkView,
              ThumbnailView,
              Print,
              TextSelection,
              TextSearch,
              Annotation,
              FormFields,
              FormDesigner,
              PageOrganizer,
            ]}
          />
        </PdfViewerComponent>
      </div>
    </div>
  );
export default Default;

const root = createRoot(document.getElementById('sample'));
root.render(<Default />);

Sample Link:

You can find the full sample in our GitHub repository.

Conclusion:

We hope you enjoyed learning about how to remove the “Match Any Word” option from the search in React PDF Viewer.

You can refer to React PDF feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React PDF Viewer Example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)