npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tecmie/labdoc-sdk

v0.1.9

Published

Labdoc SDK for React

Downloads

11

Readme

Labdoc SDK

Labdoc SDK is a collection of tools for interacting with the Labdoc API. It provides a Query client for making API requests and a PDF parser for parsing PDF documents client side. It also provides a NextJS HOC for setting up the React Query client and the PDF parser in your NextJS app.

The Inference Client

This client leverages the power of trpc and React's Context API to provide a simple and efficient interface for interacting with the Labdoc API. To initialize this client, you must provide an API secret key, which is used to authenticate your requests with the Labdoc API.

Setting up the Provider

To enable the usage of Labdoc API throughout your application, you first need to set up the LabProvider at the root level of your application. You can provide your API secret key and optional custom HTTP link customHttpLink as props to this provider, when a custom HTTP link is not provided, the default HTTP link https://labai.tecmie.africa is used.

import { LabProvider } from '@tecmie/labdoc-sdk';

<LabProvider secretOrKey="my-secret-or-key">
  <App />
</LabProvider>;

The LabProvider makes use of context to provide the necessary functions and hooks to its descendant components.

Calling the Inference Method

The useLabInference hook provides an easy way to interact with the Labdoc API. Before calling the inference method, ensure that your page text is properly parsed.

import { usePDFParser, useLabInference } from '@tecmie/labdoc-sdk';

const canvasRef = useRef < HTMLCanvasElement > null;
const { document, executeUpload, parsePageText } = usePDFParser({ canvasRef });
const { query } = useLabInference();

/** Form submission handler */
const onSubmit = async (data: UploadFormOptions) => {
  // Create a blob URL from the uploaded file
  const blobUrl = URL.createObjectURL(data.document[0]);

  // Execute the upload
  await executeUpload(blobUrl);

  // Parse the text on the first page
  const text = await parsePageText(1);

  // Call the inference method
  const diagnosis = await query({ documents: [text] });
  console.log({ document, blobUrl, text, diagnosis });
};

Under the hood, the useLabInference hook utilizes the LabBaseContext to make requests to the Labdoc API, providing a seamless experience of data fetching with built-in caching and error handling mechanisms.

Please refer to the useLabInference hook API documentation for more details.

useLabInference Hook

useLabInference is a custom hook provided by the Labdoc SDK. This hook is responsible for making requests to the Labdoc Inference API and returns the results of those requests.

Usage

Before you can make use of the useLabInference hook, make sure your component is a descendant of the LabProvider component.

import { LabProvider } from '@tecmie/labdoc-sdk';

<LabProvider secretOrKey="my-secret-or-key">
  <App />
</LabProvider>;

Once the LabProvider is set up, you can use the useLabInference hook within your functional components.

import { useLabInference } from '@tecmie/labdoc-sdk';

function YourComponent() {
  const { query } = useLabInference();
}

API

The useLabInference hook exposes an object with the following methods:

  • query: This function is used to make requests to the Labdoc API. The function accepts an argument of type LabQueryRequest (an object with a documents array property) and returns a Promise that resolves with the data from the API.
const { query } = useLabInference();

// Use parsed text as a parameter for the Labdoc API
const text = '...'; // your parsed text
const response = await query({ documents: [text] });

The response object will be of the LabQueryResponse type as detailed in the previous section of this document.

Please ensure that error handling is properly set up as this method may throw an error if the API request fails.

Example

import { usePDFParser, useLabInference } from '@tecmie/labdoc-sdk';

function YourComponent() {
  const canvasRef = useRef < HTMLCanvasElement > null;
  const { document, executeUpload, parsePageText } = usePDFParser({
    canvasRef,
  });
  const { query } = useLabInference();

  const onSubmit = async (data: UploadFormOptions) => {
    const blobUrl = URL.createObjectURL(data.document[0]);
    await executeUpload(blobUrl);
    const text = await parsePageText(1);
    const diagnosis = await query({ documents: [text] });
    console.log({ document, blobUrl, text, diagnosis });
  };
}

In this example, the text from a PDF is parsed and used as an argument for the query function provided by the useLabInference hook. The result of this query is logged to the console.

usePDFParser PDF Parser Hook

This hook is still experimental and might have a few bugs in it

This sdk comes with a react hook to assist with handling uploads for your pdf document, the client is able to parse this document client side and return the parsed data to you. This is useful for when you want to preview the document before uploading it to the server. The hook is called usePDFParser and it takes in a file object and returns a UsePDFParserReturn object. The UsePDFParserReturn object has the following properties:

export interface UsePDFParserReturn {
  documentURL: string;
  pdfPage: PDFPageProxy;
  document: PDFDocumentProxy;
  parsePageText: (pageNumber: number) => Promise<string>;
  executeUpload: (uploadedFile: string) => void;
}

Example usage The code block uses the usePDFParser hook from the @tecmie/labdoc-sdk package.

import { usePDFParser } from '@tecmie/labdoc-sdk';

const [file, setFile] = React.useState<File | null>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
const { document, executeUpload } = usePDFParser({
  canvasRef: canvasRef,
});

const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  if (event.target.files && event.target.files.length > 0) {
    setFile(event.target.files[0]);
  }
};

/** Form submission handler */
const onSubmit = async (data: UploadFormOptions) => {
  // Create a blob URL from the uploaded file tracked by handleFileChange
  const blobUrl = URL.createObjectURL(file);

  // Execute the upload
  await executeUpload(blobUrl);
  console.log({ document, blobUrl });
};

The code above initializes a canvasRef using the useRef hook and passes it to the usePDFParser hook as an argument. The usePDFParser hook returns an object that contains a document property and an executeUpload function.

The onSubmit function is an asynchronous function that takes in an object of type UploadFormOptions as its argument. It creates a blob URL from the uploaded file and passes it to the executeUpload function. Finally, it logs the document object and the blobUrl to the console.

Parsing Page Text

The parsePageText method is a helper function from the PDF Parser that takes in a page number and returns the text on that page. It is useful for when you want to preview the text on a page before uploading the document to the server. The code block below shows how to use the parsePageText method.

import { usePDFParser } from '@tecmie/labdoc-sdk';

const canvasRef = useRef<HTMLCanvasElement>(null);
const { document, executeUpload, parsePageText } = usePDFParser({
  canvasRef: canvasRef,
});

/** Form submission handler */
const onSubmit = async (data: UploadFormOptions) => {
  // Create a blob URL from the uploaded file
  const blobUrl = URL.createObjectURL(data.document[0]);

  // Execute the upload
  await executeUpload(blobUrl);

  // Parse the text on the first page
  const text = await parsePageText(1);
  console.log({ document, blobUrl, text });
};

Contributing

Watch and rebuild code with tsup and runs Storybook to preview your UI during development.

yarn dev

Run tests with jest when changes are detected.

yarn test:watch

Building

Build package with tsup for production.

yarn build

Testing

To run all tests once without watching for changes.

yarn test

To watch for changes and run tests.

yarn test:watch

Committing

When you are ready to commit simply run the following command to get a well formatted commit message. All staged files will automatically be linted and fixed as well.

yarn commit

Releasing, tagging & publishing to NPM

Create a semantic version tag and publish to Github Releases. When a new release is detected a Github Action will automatically build the package and publish it to NPM. Additionally, a Storybook will be published to Github pages.

Learn more about how to use the release-it command here.

yarn release

When you are ready to publish to NPM simply run the following command:

yarn publish