开源日报每天推荐一个 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》