Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-ocr-renderer
Advanced tools
Readme
The React OCR Renderer is a React library designed for rendering OCR (Optical Character Recognition) data on top of documents.
To install the React OCR Renderer, run the following command:
npm install --save react-ocr-renderer
To use the React OCR Renderer, import the ReactOCRRenderer
component, and provide it with the PDF file path and OCR data.
import React from 'react'
import ReactOCRRenderer from 'react-ocr-renderer'
import 'react-ocr-renderer/dist/index.css'
const ocrData = {
Blocks: [
{
BlockType: 'LINE',
Geometry: {
BoundingBox: {
Width: 0.5,
Height: 0.1,
Left: 0.25,
Top: 0.3
},
Polygon: [
{ X: 0.25, Y: 0.3 },
{ X: 0.75, Y: 0.3 },
{ X: 0.75, Y: 0.4 },
{ X: 0.25, Y: 0.4 }
]
},
Id: "1",
Page: 1,
Confidence: 99,
Text: "Sample text here"
}
// ...more blocks
],
DocumentMetadata: {
Pages: 1
}
}
const App = () => {
return (
<ReactOCRRenderer
file="path/to/your/file.pdf"
ocrData={ocrData}
type={FileType.PDF}
highlightedBlockTypes={[BlockType.LINE]}
/>
)
}
The React OCR Renderer supports advanced features such as search functionality, custom render components, and navigation through OCR blocks. Below are examples demonstrating how to leverage these capabilities.
You can add the searchText
prop to highlight and navigate through search results. This prop accepts either a string or an array of strings.
import React from 'react'
import ReactOCRRenderer, { FileType, BlockType } from 'react-ocr-renderer'
import 'react-ocr-renderer/dist/index.css'
const ocrData = {
// Your OCR data structure
}
const App = () => {
return (
<ReactOCRRenderer
file="path/to/your/file.pdf"
ocrData={ocrData}
searchText="Sample text"
highlightedBlockTypes={[BlockType.LINE]}
/>
)
}
For custom rendering of text blocks and pages, you can use customTextRenderComponent
and customPageRenderComponent
props.
import React from 'react'
import ReactOCRRenderer from 'react-ocr-renderer'
import 'react-ocr-renderer/dist/index.css'
const CustomTextComponent = ({ block }) => (
<div style={{ color: 'red' }}>{block.Text}</div>
)
const CustomPageComponent = ({ children, page }) => (
<div>
<h2>Page {page}</h2>
{children}
</div>
)
const ocrData = {
// Your OCR data structure
}
const App = () => {
return (
<ReactOCRRenderer
file="path/to/your/file.pdf"
ocrData={ocrData}
type={FileType.PDF}
customTextRenderComponent={CustomTextComponent}
customPageRenderComponent={CustomPageComponent}
/>
)
}
To navigate through OCR blocks, wrap your component in ReactOCRRendererContextProvider
and use the useReactOCRRenderer
hook.
import React from 'react'
import ReactOCRRenderer, { ReactOCRRendererContextProvider, useReactOCRRenderer, FileType, BlockType } from 'react-ocr-renderer'
import 'react-ocr-renderer/dist/index.css'
const ContextCoveredExample = () => {
const { nextBlock, prevBlock } = useReactOCRRenderer()
return (
<div>
<ReactOCRRenderer
file="path/to/file.pdf"
ocrData={/* Your OCR data */}
type={FileType.PDF}
highlightedBlockTypes={[BlockType.LINE]}
/>
<div>
<button onClick={prevBlock}>Previous</button>
<button onClick={nextBlock}>Next</button>
</div>
</div>
)
}
const App = () => {
return (
<ReactOCRRendererContextProvider>
<ContextCoveredExample />
</ReactOCRRendererContextProvider>
)
}
Contributions are welcome! Please refer to the project's issues on GitHub for areas where you can help.
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
Made with create-react-library
The npm package react-ocr-renderer receives a total of 22 weekly downloads. As such, react-ocr-renderer popularity was classified as not popular.
We found that react-ocr-renderer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.