Contents
- Overview
- Steps to Show Custom Items in Custom Stamp Dropdown
Having trouble getting help?
Contact Support
Contact Support
Displaying Custom Items in Custom Stamp Dropdown
10 Dec 202412 minutes to read
Overview
This guide explains how to add and display custom items in the custom stamp dropdown menu of Syncfusion’s PDF Viewer using React. This feature allows users to easily access and apply custom stamps to their PDF documents.
Steps to Show Custom Items in Custom Stamp Dropdown
Step 1: Follow the steps provided in the link to create a simple PDF Viewer sample.
Step 2: Configure Custom Stamp Settings
Within the PDF Viewer setup, utilize customStampSettings
to specify the custom stamps that should appear in the dropdown menu.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
PdfViewerComponent,
Toolbar,
Magnification,
Navigation,
Annotation,
TextSelection,
TextSearch,
FormFields,
FormDesigner,
PageOrganizer,
Inject
} from '@syncfusion/ej2-react-pdfviewer';
class App extends React.Component {
constructor(props) {
super(props);
this.viewerRef = React.createRef();
}
render() {
const customStampSettings = {
isAddToMenu: true,
customStamps: [
{
customStampName: 'Image1',
customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
},
{
customStampName: 'Image2',
customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
}
],
enableCustomStamp: true,
opacity: 1
};
return (
<div>
<div className='control-section' style={{ marginTop: '50px' }}>
<PdfViewerComponent
ref={this.viewerRef}
id="PdfViewer"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
resourceUrl="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2-pdfviewer-lib"
customStampSettings={customStampSettings}
style={{ height: '640px' }}
>
<Inject services={[
Toolbar,
Magnification,
Navigation,
Annotation,
TextSelection,
TextSearch,
FormFields,
FormDesigner,
PageOrganizer
]} />
</PdfViewerComponent>
</div>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
PdfViewerComponent,
Toolbar,
Magnification,
Navigation,
Annotation,
TextSelection,
TextSearch,
FormFields,
FormDesigner,
PageOrganizer,
Inject
} from '@syncfusion/ej2-react-pdfviewer';
class App extends React.Component {
constructor(props) {
super(props);
this.viewerRef = React.createRef();
}
render() {
const customStampSettings = {
isAddToMenu: true,
customStamps: [
{
customStampName: 'Image1',
customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
},
{
customStampName: 'Image2',
customStampImageSource: 'data:image/png;base64,...' // Provide a valid base64 or URL for the image
}
],
enableCustomStamp: true,
opacity: 1
};
return (
<div>
<div className='control-section' style={{ marginTop: '50px' }}>
<PdfViewerComponent
ref={this.viewerRef}
id="PdfViewer"
documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
serviceUrl= "https://services.syncfusion.com/react/production/api/pdfviewer"
customStampSettings={customStampSettings}
style={{ height: '640px' }}
>
<Inject services={[
Toolbar,
Magnification,
Navigation,
Annotation,
TextSelection,
TextSearch,
FormFields,
FormDesigner,
PageOrganizer
]} />
</PdfViewerComponent>
</div>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
By following these instructions, you can successfully configure to display custom items in the custom stamp dropdown, allowing users to easily apply personalized stamps to their documents.