Update README.md

README.md

@@ -49,7 +49,7 @@ function MyApp() {
 |<b>Document props</b>|
 |className|Class name(s) that will be added to rendered element.|n/a|`"custom-class-name-1 custom-class-name-2"`|
 |file|What PDF should be displayed.<br />Its value can be an URL, a file (imported using `import ... from ...` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport; `httpHeaders` - custom request headers, e.g. for authorization), `withCredentials` - a boolean to indicate whether or not to include cookies in the request (defaults to `false`).<br />**Warning**: Since equality check (`===`) is used to determine if `file` object has changed, it must be memoized by setting it in component's state, `useMemo` or other similar technique.|n/a|<ul><li>URL:<br />`"http://example.com/sample.pdf"` </li><li>File:<br />`import sample from '../static/sample.pdf'` and then<br />`sample`</li><li>Parameter object:<br />`{ url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }, withCredentials: true }`</ul>|
-|bboxes|Array of bboxes `[ {location, groupId} ]` that will be rendered as selectable rectangles over pdf pages.<br /><br />Bboxes can be grouped by optional parameter `groupId`. If error's check has 3rd item (2nd index) of `errorArguments`, it can be grouped with other checks with the same id from `check.errorArguments[2]` (`'${clause}-${testNumber}-${check.errorArguments[2]}'` => `4.1.2-9-79`)<br /><br />Currently support these locations:<br /><ul><li>JSON string of bbox object: `{"bbox":[{"p":1,"rect":[x,y,x2,y2]}]}`</li><li>String with coordinates for left-bottom point and top-right:`pages[1-2]/boundingBox[x,y,x2,y2]`</li><li>String path through tagged structure tree: `root/document[0]/pages[1](1 0 obj PDPage)/annots[1](100 0 obj PDLinkAnnot)`</li><li>String path to glyph in page stream: `root/document[0]/pages[0](14 0 obj PDPage)/contentStream[0](20 0 obj PDSemanticContentStream)/operators[6]/usedGlyphs[5](OPCPIB+TimesNewRomanPSMT OPCPIB+TimesNewRomanPSMT 32 0 56991387 0)`</li></ul> New contexts will be added.|n/a|`[{  groupId: '4.1.2-9-79', location: 'pages[2-4]/boundingBox[10,200,300,400]' }]`|
+|bboxes|Array of bboxes `[ {location, groupId, bboxTitle} ]` that will be rendered as selectable rectangles over pdf pages.<br /><br />Bboxes can be grouped by optional parameter `groupId`. If error's check has 3rd item (2nd index) of `errorArguments`, it can be grouped with other checks with the same id from `check.errorArguments[2]` (`'${clause}-${testNumber}-${check.errorArguments[2]}'` => `4.1.2-9-79`)<br />`bboxTitle` is an optional parameter that is set to `title` and `aria-describedby` bounding box attributes. <br /><br />Currently support these locations:<br /><ul><li>JSON string of bbox object: `{"bbox":[{"p":1,"rect":[x,y,x2,y2]}]}`</li><li>String with coordinates for left-bottom point and top-right:`pages[1-2]/boundingBox[x,y,x2,y2]`</li><li>String path through tagged structure tree: `root/document[0]/pages[1](1 0 obj PDPage)/annots[1](100 0 obj PDLinkAnnot)`</li><li>String path to glyph in page stream: `root/document[0]/pages[0](14 0 obj PDPage)/contentStream[0](20 0 obj PDSemanticContentStream)/operators[6]/usedGlyphs[5](OPCPIB+TimesNewRomanPSMT OPCPIB+TimesNewRomanPSMT 32 0 56991387 0)`</li></ul> New contexts will be added.|n/a|`[{  groupId: '4.1.2-9-79', location: 'pages[2-4]/boundingBox[10,200,300,400]' }]`|
 |activeBboxIndex|Index of active bbox from bboxes array|n/a|`0`|
 |showAllPages|Boolean flag to show pdf with all pages with scroll or single page|false|`true`
 |error|What the component should display in case of an error.|`"Failed to load PDF file."`|<ul><li>String:<br />`"An error occurred!"`</li><li>React element:<br />`<div>An error occurred!</div>`</li><li>Function:<br />`this.renderError`</li></ul>|
@@ -84,9 +84,22 @@ function MyApp() {
 |onGetAnnotationsError|Function called in case of an error while loading annotations.|n/a|`(error) => alert('Error while loading annotations! ' + error.message)`|
 |onGetTextSuccess|Function called when text layer items are successfully loaded.|n/a|`(items) => alert('Now displaying ' + items.length + ' text layer items!')`|
 |onGetTextError|Function called in case of an error while loading text layer items.|n/a|`(error) => alert('Error while loading text layer items! ' + error.message)`|
+|onSelectBbox|Function that is called when the bbox is selected by keypress handlers.|n/a|`(index) => alert('Select bounding box with index: ' + index)`|
 |<b>Bbox props</b>|
 |colorScheme|Set custom colors for bbox|```{ border?: string; borderHovered?: string; borderSelected?: string; borderRelated?: string; background?: string; backgroundSelected?: string; backgroundHovered?: string; backgroundRelated?: string;}```|n/a|
 
+## Shortcuts
+
+Bounding box selection (see `onSelectBbox` prop):
+- `Ctrl/⌘ + Up Arrow` - select next bounding box
+- `Ctrl/⌘ + Down Arrow` - select previous bounding box
+
+Page scrolling:
+- `Up Arrow` - scroll up
+- `Down Arrow` - scroll down
+- `Right Arrow` - scroll to next page
+- `Left Arrow` - scroll to previous page
+
 ## Useful links
 
 * [React-PDF](https://github.com/wojtekmaj/react-pdf)

dist/components/bbox/Bbox.d.ts

@@ -4,7 +4,7 @@ export interface IBbox {
     location: (number | string)[];
     index: number;
     groupId?: string;
-    bboxTitle: string;
+    bboxTitle?: string;
     mcidList?: number[];
     glyphIndex?: number;
     operatorIndex?: number;

dist/components/pdfDocument/pdfDocument.d.ts

@@ -13,7 +13,7 @@ export interface IPdfDocumentProps extends IDocumentProps, IPageProps {
     onBboxesParsed?(pages: number[]): void;
     onPageChange?(page: number): void;
     onWarning?(warningCode: string): void;
-    onSelectBbox(date: number | undefined): void;
+    onSelectBbox(index: number | undefined): void;
 }
 declare const _default: React.NamedExoticComponent<IPdfDocumentProps>;
 export default _default;

dist/index.d.ts

@@ -6,7 +6,7 @@ export interface IBboxLocation {
     page: number;
     location: string;
     groupId?: string;
-    bboxTitle: string;
+    bboxTitle?: string;
 }
 interface IPdfViewerProps extends IPdfDocumentProps {
     bboxes: IBboxLocation[];

src/components/bbox/Bbox.tsx

@@ -14,7 +14,7 @@ export interface IBbox {
   location: (number | string)[];
   index: number;
   groupId?: string;
-  bboxTitle: string;
+  bboxTitle?: string;
   mcidList?: number[];
   glyphIndex?: number;
   operatorIndex?: number;

src/components/pdfDocument/PdfDocument.tsx

@@ -40,7 +40,7 @@ export interface IPdfDocumentProps extends IDocumentProps, IPageProps {
   onBboxesParsed?(pages: number[]): void;
   onPageChange?(page: number): void;
   onWarning?(warningCode: string): void;
-  onSelectBbox(date: number | undefined): void;
+  onSelectBbox(index: number | undefined): void;
 }
 
 const PdfDocument: FC<IPdfDocumentProps> = (props) => {

src/index.tsx

@@ -10,7 +10,7 @@ export interface IBboxLocation {
   page: number;
   location: string;
   groupId?: string;
-  bboxTitle: string;
+  bboxTitle?: string;
 }
 
 interface IPdfViewerProps extends IPdfDocumentProps {