{"_id":"@adamatronix/react-fancy-ornamental","_rev":"1-6709cfc6f7face49111db86b3984f75d","name":"@adamatronix/react-fancy-ornamental","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@adamatronix/react-fancy-ornamental","version":"0.1.0","main":"dist/index.js","private":false,"repository":{"type":"git","url":"git+https://github.com/adamatronix/react-fancy-ornamental.git"},"dependencies":{"@testing-library/jest-dom":"^5.12.0","@testing-library/react":"^11.2.6","@testing-library/user-event":"^12.8.3","react-test-renderer":"^17.0.2","styled-components":"^5.3.0","web-vitals":"^1.1.1"},"scripts":{"start":"react-scripts start","build":"react-scripts build","clean":"rimraf dist","compile":"npm run clean && env-cmd -f .env babel src/components --out-dir dist --copy-files --ignore stories.js","test":"react-scripts test","eject":"react-scripts eject","storybook":"start-storybook -p 6006 -s public","build-storybook":"build-storybook -s public"},"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"]},"devDependencies":{"@babel/cli":"^7.13.16","@babel/preset-env":"^7.13.15","@babel/preset-react":"^7.13.13","@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","babel-plugin-inline-react-svg":"^2.0.1","env-cmd":"^10.1.0","react":"^17.0.2","react-dom":"^17.0.2","react-scripts":"4.0.3","cross-env":"^7.0.3","sass":"^1.32.12"},"gitHead":"ecc38e27f0b43e0732df8331e493f0aec3f2517d","description":"Add some fanciness to your site by adding a decorative container to your layout.","bugs":{"url":"https://github.com/adamatronix/react-fancy-ornamental/issues"},"homepage":"https://github.com/adamatronix/react-fancy-ornamental#readme","_id":"@adamatronix/react-fancy-ornamental@0.1.0","_nodeVersion":"14.7.0","_npmVersion":"6.14.7","dist":{"integrity":"sha512-kWvpzqjDSlkcoPwOlf9h6uxBPvD4bzdKlJGPKiQSoOuWYGetRJZNSAcFlg1emDa1m9y2V/z7unGEJiDD5ooO5w==","shasum":"b7149c5b837a4d8a9b38cd26796740f017253afe","tarball":"https://registry.npmjs.org/@adamatronix/react-fancy-ornamental/-/react-fancy-ornamental-0.1.0.tgz","fileCount":6,"unpackedSize":18793,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5Wg3CRA9TVsSAnZWagAAPtsP/24H826nMXrmWp54aumX\nrVpWyXiwRk4Kkn2oGpb9XZquVPjCXGB8ABiiAhHN1RIKirl2aKBnp5JLXHcz\nH+Ti1uHLwR+v4R9VO7IYrZJhgaDo+2zOwKHG8OTIp4V9J4x6O9OKUQeSHJk+\ndIh6R9MRvNrIWRA1MOszxb3ddbqkTTp4fEZ6kkW9nKbGSVILr2EKeBKWnYoH\n8uhz2DuxHnPibSTrseDo6FrK61+11m3TCiXjFhtDE1uIfxJovTn2KVQhflKO\nxrGvqH1vHioJn08wP0PemVRei7mJhH3mUNf26xzCApBd3chadpZI6l4JV6uV\n6ZhS6J3YhH7rzBO7SwPD3pTeuiiMnGlGceJ4pw9dqA9d5R/ktpaP37H/wg1R\nZdqMjkWzYMu1LCgYRnbpscv76EGQARA+sP/EDag0UjZ2RwNZ9OefsRV1Cjlx\nOWDnUpE1p5G+83UvWzoFPmaf8+T5O/ufeJLUoawVQBHHaE0Gwy769oUDrvxJ\nBLQujlz7t1/LlSPkXrBwdmqEg8IzgUcwydBd7l//9FztqNWpEAmMoNsxMKHP\nIWoaO09bNqVxIwq9EX3BmFR1KHfRILwtLIR48iDBybxogwsAal5p+JpFH7YG\nT0G6Mj0mU6zwXNEeYNy6OXzghM+kaeqjzw1SwZmtbRNoL91DpgMF+3juT4X5\nKZ2U\r\n=se6E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCneL4CqEu/8I34W0M3cveQB2vCJZq1mG7y/duyxSFiewIgWxUaoWR1tj+oR7+kzQtpsQFqLGdP6ZLSOKmTcCn1DMw="}]},"_npmUser":{"name":"adamatronix","email":"adam@adamatronix.com"},"directories":{},"maintainers":[{"name":"adamatronix","email":"adam@adamatronix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-fancy-ornamental_0.1.0_1625647159115_0.5317217273594597"},"_hasShrinkwrap":false}},"time":{"created":"2021-07-07T08:39:19.064Z","0.1.0":"2021-07-07T08:39:19.404Z","modified":"2022-04-04T11:25:05.462Z"},"maintainers":[{"name":"adamatronix","email":"adam@adamatronix.com"}],"description":"Add some fanciness to your site by adding a decorative container to your layout.","homepage":"https://github.com/adamatronix/react-fancy-ornamental#readme","repository":{"type":"git","url":"git+https://github.com/adamatronix/react-fancy-ornamental.git"},"bugs":{"url":"https://github.com/adamatronix/react-fancy-ornamental/issues"},"readme":"# react-fancy-ornamental\n\nAdd some fanciness to your site by adding a decorative container to your layout.\n\n## Install\n\n```console\n$ npm install @adamatronix/react-fancy-ornamental --save\n```\n\n## Example Usage\n\n### Basic\n\nImplementation using one hundred percent of the height.\n\n```jsx\nimport React from 'react'\nimport { FancyOrnamental } from '@adamatronix/react-fancy-ornamental'\nimport { ReactComponent as Ornament } from './assets/ornament-1.svg';\n\n\nconst Example = () => {\n  return <div style={{height: '100vh', width: '100%', boxSizing: 'border-box', padding: '100px'}}>\n      <FancyOrnamental \n        topOrnament={<Ornament/>} \n        bottomOrnament={<Ornament/>} \n        ornamentHeight={48} \n      ></FancyOrnamental>\n    </div>\n}\n```\n\n### With autoHeight\n\nAllow the container to take the height of the content.\n\n```jsx\nimport React from 'react'\nimport { FancyOrnamental } from '@adamatronix/react-fancy-ornamental'\nimport { ReactComponent as Ornament } from './assets/ornament-1.svg';\n\n\nconst Example = () => {\n  return \n      <FancyOrnamental \n        topOrnament={<Ornament/>} \n        bottomOrnament={<Ornament/>} \n        ornamentHeight={48} \n        autoHeight\n      >Cras est metus, iaculis a dictum eget, suscipit vitae quam. Mauris sollicitudin lectus nec mollis tristique. Fusce sagittis, nulla et gravida elementum, orci nisl pellentesque lacus, eget tempor nibh erat nec elit. Aenean ante massa, varius vitae ullamcorper vel, iaculis a urna. Vestibulum ultricies semper nisl quis malesuada. Fusce ullamcorper nunc non tempor consectetur. Donec at turpis ac dui interdum maximus in eget dui. Vestibulum viverra velit quis efficitur dictum. Ut molestie nibh vel lectus sollicitudin bibendum. Aenean suscipit eget purus sed fermentum.</FancyOrnamental>\n}\n```\n\n## Props\n\n### topOrnament\n\nType: Node Default: undefined\n\nThe asset which will appear at the top of the container.\n\n**NOTICE**\nOnly one child is allowed to be passed.\n\n### bottomOrnament\n\nType: Node Default: undefined\n\nThe asset which will appear at the bottom of the container.\n\n**NOTICE**\nOnly one child is allowed to be passed.\n\n### ornamentHeight\n\nType: Number Default: undefined\n\nPass the height of the ornaments\n\n### gapSize\n\nType: Number Default: undefined\n\nPass size of the gap which will appear inbetween the border where the ornament lies.\n\n### borderSize\n\nType: Number Default: undefined\n\nPass size of the border.\n\n### roundedSize\n\nType: Number Default: undefined\n\nPass radius size of the border.\n\n### autoHeight\n\nType: Boolean Default: undefined\n\nWhen set, it allows the container to take the children content height. Otherwise it will be one hundred percent of its parent.","readmeFilename":"README.md"}