{"_rev":"5-0c3b844f28c2ceb210296612c4878acd","time":{"created":"2022-09-26T10:24:59.784Z","0.1.8":"2022-09-26T10:01:06.133Z","modified":"2022-09-26T10:25:00.142Z","0.1.8-1":"2022-09-26T10:17:53.774Z","0.1.9":"2022-09-26T10:19:46.480Z","0.1.10":"2022-09-26T10:25:00.013Z"},"_id":"@caocong/react-hexviewer-ts","name":"@caocong/react-hexviewer-ts","dist-tags":{"latest":"0.1.10"},"versions":{"0.1.10":{"name":"@caocong/react-hexviewer-ts","version":"0.1.10","scripts":{"start":"craco start","build":"gulp build","tsc":"tsc --project tsconfig.build.json","predeploy":"npm run build & npm run chromatic","deploy":"npm publish dist","test":"craco test","storybook":"start-storybook -p 6006 -s public","build-storybook":"build-storybook -s public","chromatic":"npx chromatic --project-token=329affb5b264"},"license":"MIT","homepage":"https://github.com/caocong1/react-hexviewer-ts","repository":{"type":"git","url":"git+https://github.com/caocong1/react-hexviewer-ts.git"},"keywords":["react","react-component","hex","hexviewer","typescript"],"author":{"name":"Kondakov Artem","email":"kondakov.artem@gmail.com"},"bugs":{"url":"https://github.com/caocong1/react-hexviewer-ts/issues"},"publishConfig":{"registry":"https://registry.npmjs.org/"},"main":"index.js","dependencies":{"react":"^17.0.2","react-dom":"^17.0.2"},"devDependencies":{"chromatic":"^5.8.3","@craco/craco":"^6.1.2","@storybook/addon-actions":"^6.2.9","@storybook/addon-essentials":"^6.2.9","@storybook/addon-links":"^6.2.9","@storybook/node-logger":"^6.2.9","@storybook/preset-create-react-app":"^3.1.7","@storybook/react":"^6.2.9","@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.1.0","@testing-library/user-event":"^12.1.10","@types/gulp":"^4.0.8","@types/jest":"^26.0.15","@types/node":"^12.0.0","@types/react":"^17.0.0","@types/react-dom":"^17.0.0","del":"^6.0.0","gulp":"^4.0.2","gulp-run":"^1.7.1","react-scripts":"4.0.3","sass":"^1.34.0","storybook-preset-craco":"^0.0.4","ts-node":"^10.0.0","typescript":"^4.1.2","web-vitals":"^1.0.1"},"eslintConfig":{"extends":["react-app","react-app/jest"],"overrides":[{"files":["**/*.stories.*"],"rules":{"import/no-anonymous-default-export":"off"}}]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"description":"React Hex Viewer Ts ================","types":"./index.d.ts","gitHead":"1c137f31ea7a43b2a6c18f199673103fa92469dd","_id":"@caocong/react-hexviewer-ts@0.1.10","_nodeVersion":"16.16.0","_npmVersion":"8.15.0","dist":{"integrity":"sha512-DXA15mkpnhY14QmvupRgyxy2VyTg+26DPhw88G76IERp7yO9BmdPRm4+cYeYMYXuXKXY8I4JoankpKB0+1IUCA==","shasum":"b18f80b878c95714d84fed2d9a0e3a4aafbd5455","tarball":"https://registry.npmjs.org/@caocong/react-hexviewer-ts/-/react-hexviewer-ts-0.1.10.tgz","fileCount":24,"unpackedSize":24617,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAgBV74NFpgoNrh7mIve5AWz6FGVZS3Eum4sCoatFpLwIhANi2+AeRNHBS2O7eHIpL2K3p2dbV4/zi6pbiMuA/z6gO"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMX38ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+dQ//R0ivUub8ojndLRMPcm41EOLVg/MXGKETlPodmbb3WCRMfamA\r\nwqyNmNI8uvERtWaBo2Dddw3GgFfdcIZliiuv4YXS5ejkrUrFykl8YwSQfWaL\r\njTg6AujEEbifeNFJsV+7m6VPWgatH96M60P0jODOeT8wiX1Vx/f1VnbxTRM0\r\n+IRNC5xAaDfBeVQcdje7KYaDiOdzQ9S5HEHs1vPJpwXLnUZoXjglgWd1lvkz\r\nsZyuspQuUAsn5+kvWWvyQIc0DCUsdZxxifGYzfoKSCX7e7l48Cg0ibS8/Tsk\r\nM5GXogVE3OCDTUa0VX2Aq/76v4O9rKSHMxGzHVZo5b6jeH2hoTrYO8asVn4Q\r\nROw0nbnNIprKh+Fsa8AEsuxGWVFoMXqGDvY2c2dFwUI47Ver2DrMCxlaCJeV\r\nnBBPdn6jyVQ2OdYRFqFFU+42dpmUtCSieK9Qfgu3HH+Ml8ou36Ls6YFyCObB\r\n1avJDGaseondZfl+WxWGTizpZ2WVg6RZKZFsLgDVvZ0GMVDN61OuCaQMX9In\r\nhvxHOEMvSetbgkkdMeV63XM41ccnfhtGTchQpOrByJAIVlnrX4D7XyFG8pui\r\nkHe7uyxPvFNupPNcZepNorOmlGWSdR4XBAAE7tob8VZ0WFJBQhrTN3QwQJKc\r\n1cLe3gFQsOY+tt3utyyWe59qUQUtRpZpyKM=\r\n=neFW\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"caocong","email":"caocong1@gmail.com"},"directories":{},"maintainers":[{"name":"caocong","email":"caocong1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-hexviewer-ts_0.1.10_1664187899846_0.0073878721483950915"},"_hasShrinkwrap":false}},"maintainers":[{"name":"caocong","email":"caocong1@gmail.com"}],"description":"React Hex Viewer Ts ================","homepage":"https://github.com/caocong1/react-hexviewer-ts","keywords":["react","react-component","hex","hexviewer","typescript"],"repository":{"type":"git","url":"git+https://github.com/caocong1/react-hexviewer-ts.git"},"author":{"name":"Kondakov Artem","email":"kondakov.artem@gmail.com"},"bugs":{"url":"https://github.com/caocong1/react-hexviewer-ts/issues"},"license":"MIT","readme":"React Hex Viewer Ts\n================\n\nA component is a minor reworking and rethinking of a component [react-hexviewer](https://www.npmjs.com/package/react-hexviewer) (thanks [tperson](https://www.npmjs.com/~tperson)) in the typescript\n\n![Screenshot](/images/ss.png)\n\n# Example\n```typescript\nimport React from 'react';\nimport {HexViewer} from 'react-hex-viewer-ts';\n// data is Buffer | number[] | base64 | hex\nReact.render(\n    <HexViewer>{data}</HexViewer>, \n    document.body);\n```\n\nThe component has props interface HexViewerProps.\n```typescript\nexport interface HexViewerProps {\n  /** number of bytes per row */\n  rowLength?: number;\n  /** number of bytes between a visible split */\n  setLength?: number;\n  /** Buffer | number[] | string as base64 or raw hex */\n  children: string | Buffer | number[];\n  /** sign that the data is hex */\n  hex?: boolean;\n  /** sign that the data is base64 */\n  base64?: boolean;\n  /** Component that will be displayed if there is no data */\n  noData?: ReactNode;\n  /** Component that will be displayed if data parsing is unsuccessful */\n  errorData?: ReactNode;\n}\n```\n\n# Styling\n\nIn your projects, you can import less or scss styling from a package\n\n## Less\n\n```less\n@import '../node_modules/react-hexviewer-ts/less/variables.less'; // for some reason ~react-hexviewer-ts does't work properly\n@hex-color: rgb(189, 189, 189); // you can redefine variables from variables.less\n@import '~react-hexviewer-ts/less/hex-viewer.less';\n\n```\n## Sass\n```scss\n$hex-color: rgb(189, 189, 189); // you can redefine variables from variables.scss\n@import '~react-hexviewer-ts/scss/hex-viewer.scss';\n```\n\n# Storybook demo\n\n[Demo link](https://www.chromatic.com/component?appId=60b2937a3474f6004127c25c&name=Example%2FHexViewer&mode=interactive&buildNumber=1&specName=Primary&historyLengthAtIndex=4&distanceToMoveBack=5)\n\nComments are welcome\n","readmeFilename":"README.md"}