1.2.17 • Published 2 months ago
react-whiteboard-pdf v1.2.17
react-whiteboard-pdf
Check App demo here:
App DEMO
If you like this project you can help us with $1,000,000 donation or any other amount
github: github.com/sponsors/spiridonov-oa patreon: patreon.com/OlegSpiridonov
Compatibility
React 17
Installation
npm install react-whiteboard-pdf
or
yarn add react-whiteboard-pdf
Usage
const App = () => {
return (
<div>
<Whiteboard />
</div>
);
};
You can change default props
import { Whiteboard } from 'react-whiteboard-pdf';
const App = () => {
return (
<Whiteboard
// default parameters
drawingSettings={{
brushWidth: 5, // :number (optional) (default: 5) - brush size for drawing
background: false, // :boolean (optional) (default: false) - polkadot as background picture
currentMode: modes.PENCIL, //
currentColor: '#000000',
brushWidth: 5,
fill: false, // if true, square, rectangle, and triangle will be filled with current color
}}
// default controls
controls={{
PENCIL: true,
LINE: true,
RECTANGLE: true,
ELLIPSE: true,
TRIANGLE: true,
TEXT: true,
SELECT: true,
ERASER: true,
CLEAR: true,
FILL: true,
BRUSH: true,
COLOR_PICKER: true,
DEFAULT_COLORS: true,
FILES: true,
SAVE_AS_IMAGE: true,
GO_TO_START: true,
SAVE_AND_LOAD: true,
ZOOM: true,
TABS: true,
}}
settings={{
zoom: 1,
minZoom: 0.05,
maxZoom: 9.99,
contentJSON: null, // JSON to render in canvas
}}
fileInfo={{
file: { name: 'Whiteboard' },
totalPages: 1,
currentPageNumber: 1,
currentPage: '',
}}
onObjectAdded={(addedObject) => {}}
onObjectRemoved={(removedObject) => {}}
onObjectAdded={(data, event, canvas) => {}}
onObjectRemoved={(data, event, canvas) => {}}
onZoom={(data, event, canvas) => {}}
onImageUploaded={(data, event, canvas) => {}}
onPDFUploaded={(data, event, canvas) => {}}
onPDFUpdated={(data, event, canvas) => {}}
onPageChange={(data, event, canvas) => {}}
onOptionsChange={(data, event, canvas) => {}}
onSaveCanvasAsImage={(data, event, canvas) => {}}
onConfigChange={(data, event, canvas) => {}}
onSaveCanvasState={(data, event, canvas) => {}}
onDocumentChanged={(data, event, canvas) => {}}
/>
);
};
Development:
npm i
npm start
Author:
Contributors:
Thanks for your help in building this project rodionspi
1.2.17
2 months ago
1.2.16
2 months ago
1.2.15
2 months ago
1.2.8
6 months ago
1.2.7
6 months ago
1.2.13
6 months ago
1.2.10
6 months ago
1.2.11
6 months ago
1.2.14
6 months ago
1.2.5
11 months ago
1.2.4
11 months ago
1.2.3
11 months ago
1.2.2
11 months ago
1.2.1
11 months ago
1.2.0
11 months ago
1.0.4
11 months ago
1.0.0
11 months ago