📄 A responsive print preview in A4 format

Overview

react-preview-a4

📄 A responsive print preview in A4 format.

Table of Contents

Installation

To install, you can use npm:

$ npm install --save @diagoriente/react-preview-a4
$ yarn add @diagoriente/react-preview-a4

Examples

Here is a simple example of react-preview-a4:

import React from "react";
import ReactDOM from "react-dom";
import PreviewA4 from "react-preview-a4";

function App() {
  // your code

  return (
    <div>
      <PreviewA4>
        <h1>Your code</h1>
      </PreviewA4>
    </div>
  );
}

ReactDOM.render(<App />, appElement);

You can find the example in the examples directory, which you can run in a local development server using npm start or yarn start.

Demo

There is a demo hosted on CodeSandbox.

You might also like...

Preview document wrtting in YOUR markdown.

Preview document wrtting in YOUR markdown.

Glance Vim Do you know the number of Markdown flavours in the world? Everyone has an own flavour. It's hard to find the suitable Markdown previewer fo

Dec 6, 2022

DGPreview - Make UIKit project enable preview feature of SwiftUI

DGPreview - Make UIKit project enable preview feature of SwiftUI

DGPreview Make UIKit project enable preview feature of SwiftUI Requirements iOS

Feb 14, 2022

Ultra Math Preview for VS Code

 Ultra Math Preview for VS Code

Ultra Math Preview for VS Code Real-time math preview for latex and markdown. Usage Install this extension, and then put your cursor into math block i

Dec 19, 2022

Utility for generating preview images of StarCraft: Brood War and Remastered maps

bwpreview Utility for generating preview images of StarCraft: Brood War and Remastered maps (.scm and .scx files). All of the actual work of parsing m

Oct 14, 2022

Preview Notion's private links in Slack

Preview Notion's private links in Slack

slack-notion-preview English | 日本語 Description A Slack App that shows a preview of a private Notion link posted to Slack. Features Notion article titl

Nov 16, 2022

Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Key Sequence Shortcut Key Sequence Shortcut is an obsidian plugin, allow binding key sequences to an obsidian command. For example If we assume "t" st

Dec 26, 2022

A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

Strapi Preview Button A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view. Get Started Features I

Dec 30, 2022

WPPConnect/WA-JS API SERVER is a small api server to provide url preview for @wppconnect/wa-js library

WPPConnect/WA-JS API SERVER WPPConnect/WA-JS API SERVER is a small api server to provide url preview for @wppconnect/wa-js library Our online channels

Aug 11, 2022

Govinor is a platform to deploy and preview docker containers.

Govinor A platform for creating and managing Docker containers that integrates with Github to offer branch preview links. Note: This is a work in prog

Jan 10, 2022
Releases(v0.2.5)
Owner
Diagoriente
Diagoriente est une plateforme gratuite et ouverte à tous pour valoriser ses compétences et trouver des pistes de métiers selon ses intérêts.
Diagoriente
Codebraid Preview provides a Markdown preview for Pandoc documents within VS Code.

Codebraid Preview provides a Markdown preview for Pandoc documents within VS Code. Most Markdown previews don't support all of Pandoc's extensions to Markdown syntax. Codebraid Preview supports 100% of Pandoc features—because the preview is generated by Pandoc itself! There is also full bidirectional scroll sync and document export.

Geoffrey Poore 12 Dec 28, 2022
Get an isolated preview database for every Netlify Preview Deployment

Netlify Preview Database Plugin Create an isolated preview database for each preview deployment in Netlify Quickstart • Website • Docs • Discord • Twi

Snaplet 10 Nov 16, 2022
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 57 Dec 28, 2022
A daily print-and-play roguelike adventure you can play offline.

Chronicles of Stampadia A print-and-play roguelike with a new adventure every day! Play today's adventure | Read the manual | Learn how to play | Disc

Francesco Cottone 36 Oct 15, 2022
NoPrint.js - Disable Print, Screenshot, Copy & Paste in HTML by JavaScript.

NoPrint.js Disable Print, Screenshot, Copy & Paste in HTML by JavaScript. NoPrint.js is a small and neat open source JS library that disables print, s

null 33 Dec 26, 2022
Mixed Messages is a simple Node.js application, that will print a randomized fake fact to the terminal each time it is ran.

Mixed Messages - Fake Fact Generator Mixed Messages is a simple Node.js application, That will print a randomized fake fact to the terminal each time

Parietic 2 Jan 10, 2022
A vscode extension to quickly print variable, variable type, tensor shape etc by using shortcuts

Quick Python Print This repo is inspired by "Python Quick Print". "Python Quick Print" can quickly print out variables on the console by using shortcu

weida wang 5 Oct 28, 2022
print faceit elo into the console/chat via telnet

Print MM Ranks and FaceIT elo ingame This tool uses telnet to interact with the console in CS:GO Description Gets faceit elo via the official faceit a

Dominik Wolf 5 Sep 20, 2022
Print seat layout for movie, flight (jQuery plugin)

seatLayout.js (movie-seat-layout) Print seat layout for movie, flight and seat selection (jQuery plugin) Demo : https://sachinkurkute.github.io/movie-

Sachin Kurkute 20 Dec 8, 2022
Responsive Tabs is a jQuery plugin that provides responsive tab functionality.

Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.

Jelle Kralt 537 Dec 8, 2022