diff --git a/README.md b/README.md index e3100cf..e8eee97 100644 --- a/README.md +++ b/README.md @@ -9,50 +9,49 @@ Print the content of a React component. +`npm install --save react-to-print` + ## Demo [![Run react-to-print](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/rzdhd) -## Install - -`npm install --save react-to-print` - -## API - -### Usage +## Usage ```tsx +import { useReactToPrint } from "react-to-print"; +import { useRef } from "react"; + const contentRef = useRef(null); const reactToPrintFn = useReactToPrint({ contentRef }); return (
- +
Content to print
); ``` -### Options +It is also possible to lazy set the ref if your content being printed is dynamic. See the [`LazyContent`](https://github.com/MatthewHerbst/react-to-print/blob/master/examples/LazyContent/index.tsx) example for more. This can also be useful for setting the ref in non-React code, such as util functions. + +## API | Option | Type | Description | | :-------------------: | :------- | :---------------------------------------------------------------------------------------------------------------------------------- | -| **`bodyClass?`** | `string` | One or more class names to pass to the print window, separated by spaces | -| **`contentRef?`** | `React.RefObject` | The ref pointing to the content to be printed. Alternatively, pass the ref directly to the callback returned by `useReactToPrint` | -| **`documentTitle?`** | `string` | Set the title for printing when saving as a file. Ignored when passing a custom `print` option | -| **`fonts?`** | `{ family: string, source: string; weight?: string; style?: string; }[]` | A list of fonts to load into the printing iframe. This is useful if you are using custom fonts | -| **`ignoreGlobalStyles?`** | `boolean` | Ignore all `