react-ink-scripter 0.0.21 → 0.0.22

package/dist/cjs/index.js

@@ -19,7 +19,8 @@ var pix2mm = function pix2mm(pix) {
 };
 var usePagePrint = function usePagePrint(_ref) {
   var open = _ref.open,
-    pageConfig = _ref.pageConfig;
+    pageConfig = _ref.pageConfig,
+    style = _ref.style;
   var _useState = react.useState({
       width: pageConfig.width || 0,
       height: pageConfig.height || 0,
@@ -62,11 +63,21 @@ var usePagePrint = function usePagePrint(_ref) {
   var getPageContent = react.useCallback(function () {
     return (pageNode === null || pageNode === void 0 ? void 0 : pageNode.innerHTML) || '';
   }, [pageNode]);
+  var pageStyle = react.useMemo(function () {
+    var width = page.width,
+      height = page.height,
+      marginLeft = page.marginLeft,
+      marginRight = page.marginRight,
+      marginTop = page.marginTop;
+    var extraStyle = "\nhtml {\nmargin: 0;\npadding: 0;\nwidth: ".concat(width, "mm;\nheight: ").concat(height, "mm\n}\n\nbody {\nwidth: ").concat(width, "mm;\nmargin: 0;\npadding: 0;\nbox-sizing: border-box;\npadding-left: ").concat(marginLeft, "mm;\npadding-right: ").concat(marginRight, "mm;\npadding-top: ").concat(marginTop, "mm;\n}\n");
+    return style + '\n' + extraStyle;
+  }, [page, style, page]);
   return {
     setPageNodeRef: setPageNodeRef,
     page: page,
     getPageContent: getPageContent,
-    pageNode: pageNode
+    pageNode: pageNode,
+    pageStyle: pageStyle
   };
 };
 

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { useState, useCallback, useLayoutEffect, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
+import { useState, useCallback, useLayoutEffect, useMemo, forwardRef, useRef, useImperativeHandle } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import clsx from 'clsx';
@@ -8,7 +8,7 @@ const getPageHeight = (height, page) => {
     return height + marginTop + marginBottom;
 };
 const pix2mm = (pix) => Math.round(pix * 0.2645833333);
-const usePagePrint = ({ open, pageConfig, }) => {
+const usePagePrint = ({ open, pageConfig, style, }) => {
     const [page, setPage] = useState({
         width: pageConfig.width || 0,
         height: pageConfig.height || 0,
@@ -43,7 +43,29 @@ const usePagePrint = ({ open, pageConfig, }) => {
     const getPageContent = useCallback(() => {
         return pageNode?.innerHTML || '';
     }, [pageNode]);
-    return { setPageNodeRef, page, getPageContent, pageNode };
+    const pageStyle = useMemo(() => {
+        const { width, height, marginLeft, marginRight, marginTop } = page;
+        const extraStyle = `
+html {
+margin: 0;
+padding: 0;
+width: ${width}mm;
+height: ${height}mm
+}
+
+body {
+width: ${width}mm;
+margin: 0;
+padding: 0;
+box-sizing: border-box;
+padding-left: ${marginLeft}mm;
+padding-right: ${marginRight}mm;
+padding-top: ${marginTop}mm;
+}
+`;
+        return style + '\n' + extraStyle;
+    }, [page, style, page]);
+    return { setPageNodeRef, page, getPageContent, pageNode, pageStyle };
 };
 
 const IFrame = forwardRef((props, ref) => {

package/dist/esm/usePagePrint.d.ts

@@ -11,11 +11,13 @@ export declare const pix2mm: (pix: number) => number;
 export type usePagePrintProps = {
     open?: boolean;
     pageConfig: Partial<PageConfig>;
+    style?: string;
 };
-export declare const usePagePrint: <T extends Element>({ open, pageConfig, }: usePagePrintProps) => {
+export declare const usePagePrint: <T extends Element>({ open, pageConfig, style, }: usePagePrintProps) => {
     setPageNodeRef: (node: T) => void;
     page: PageConfig;
     getPageContent: () => string;
     pageNode: T | undefined;
+    pageStyle: string;
 };
 export default usePagePrint;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-ink-scripter",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "a react component for generate page to print",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",