開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

2024年2月10日，開源日報第1101期：
今日推薦開源項目：《Magika》
今日推薦英文原文：《Build complex PDFs using React: react-print-pdf》

開源項目

今日推薦開源項目：《Magika》傳送門：項目鏈接

推薦理由： Magika 是一個由谷歌開發的圖像處理庫，它提供了一系列的圖像處理功能，包括圖像增強、圖像去噪、圖像分割等
直達鏈接🔗：google.github.io/magika/

英文原文

今日推薦英文原文： Build complex PDFs using React: react-print-pdf

推薦理由：主要介紹react-print-pdf開源庫，介紹了一些 react-print-pdf 的功能、優點和使用方法，以及為什麼選擇開源。文章還提供了一個簡單的示例展示了如何使用該庫創建 PDF 文檔

Build complex PDFs using React: react-print-pdf

#pdf #react #tooling

tl,dr: We launched our open-source library react-print-pdf. What you can do with it and how you can contribute:

Use React components to generate beautiful PDFs.
Use templates to quickly start generating documents.
Share your own components and templates with the community.
Contribute to the library by fixing bugs, adding new features, or improving the documentation.

What is react-print-pdf?

A collection of high-quality, unstyled components for creating beautiful PDFs using React and TypeScript. Forget about DOCx, LaTeX, or painful outdates libraries. With react-print, embrace a new way to create PDFs, designed by and for developers.

Why ?

We believe documents are at the core of communication—invoices, contracts, resumes, brochures, etc. They are the primary method for exchanging information with others professionally. So, why do we continue to use decades-old technology to create them? We believe you deserve better. Document production needs to be modernized. Start today and create your next PDF the same way you build a web app. And yes, this includes automating data integration into your documents. Say hello to react-print-pdf.

But.. open-source?

Going open-source is a way to give back to the community. We believe that by sharing our library, we can help others to create better documents. We also believe that by opening our library, we can learn from the community and improve our product. We are excited to see what you will build with it.

Also, we -- Pierre, Titouan, and Auguste -- always have been using open-source libraries for our personal and professional projects. We are grateful for the work of the community and we want to be part of it.

For the OGs, you might remember that when we work on our first venture at YCombinator, CodeMuse, we also decided to put our entire project open-source. So it's not our first time, and we are excited to do it again with Onedoc.

Among the many reasons to open-source our library, here is a few:

Transparency: We want to be transparent with our users and the community. We want to show how our library works and how it is built. We want to show that we are committed to our product and that we are open to feedback and contributions.
Security: We believe that open-source software is more secure. By sharing our library, we can get feedback from the community and improve the security of our product.
Community: We want to build a community around our library. We want to share our knowledge and learn from others. We want to help others to create better documents and we want to learn from others how to improve our product.
Innovation: We believe that open-source software is more innovative. By sharing our library, we can get feedback from the community and improve our product. We can also learn from others and improve our product.

Technical Deep dive

I will show you how to use the library in 5 simple steps.

1. Create directory

Create a new folder called react-print-starter and initialize a new npm project

mkdir react-print-starter
cd react-print-starter
npm init -y

2. Install the dependencies

Get the react-print package locally with your favorite package manager.

npm install -s @onedoc/react-print

yarn add @onedoc/react-print

pnpm add @onedoc/react-print

3. Create your first PDF Component

Create a new folder call documents, then create a new file inside call index.jsx and copy the following code:

import { PageTop, PageBottom, PageBreak } from "@onedoc/react-print";
import * as React from "react";

export const Document = ({ props }) => {
  return (
    <div>
      <PageTop>
        <span>Hello #1</span>
      </PageTop>
      <div>Hello #2</div>
      <PageBottom>
        <div className="text-gray-400 text-sm">Hello #3</div>
      </PageBottom>
      <PageBreak />
      <span>Hello #4, but on a new page ! </span>
    </div>
  );
};

4. Compile your document to HTML

import { compile } from "@onedoc/react-print";
import { Document } from "./document";

const html = compile(<Document />);

console.log(html);

5. Generate your document with Onedoc

It's now time to generate your PDF from your component. We recommend using Onedoc as react-print has beem build especially to work witht his software. However, feel free to use any integrations that suits you the best.

How to generate my PDF from my react-print component.

How to contribute

Here are a few ways you can contribute to the library:

Improving the documentation
Build new components
Build new templates
Fix bugs and improve the library overall

You can find more information on how to contribute in our documentation.

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/

開源日報第1101期：圖像處理庫：《Magika》