{"_id":"@eisberg-labs/next-image-section","_rev":"1-094dc55feb3c066307f62a1e5e38d76b","name":"@eisberg-labs/next-image-section","dist-tags":{"latest":"4.0.2"},"versions":{"4.0.0":{"name":"@eisberg-labs/next-image-section","version":"4.0.0","description":"Image as background, React section with lazy loaded nextjs image as background and tailwind compatible","keywords":["react","nextjs","background","image","lazy","tailwind"],"homepage":"https://www.amarjanica.com/projects/react-components/next-image-section","bugs":{"url":"https://github.com/eisberg-labs/react-components/issues"},"repository":{"type":"git","url":"git+https://github.com/eisberg-labs/react-components.git"},"license":"MIT","author":{"name":"Ana Bujan - Eisberg Labs","email":"ana@eisberg-labs.com","url":"https://www.eisberg-labs.com"},"sideEffects":false,"main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","directories":{"lib":"dist","test":"__tests__"},"scripts":{"prebuild":"npm run test && npm run lint && npm run prettier","build":"rollup -c ../../rollup.config.js","lint":"eslint {src,__tests__}/**/*","prettier":"prettier --write \"./(src|__tests__)/**/*.(ts|tsx)\"","test":"jest -c ../../jest.config.js"},"devDependencies":{"next":"13.1.1","react":"^18.2.0","react-dom":"^18.2.0"},"peerDependencies":{"next":"^12.0.0 || ^13.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"publishConfig":{"access":"public"},"documentation":{"title":"Next Image Background Section","thumbnail":"demo.png"},"dependencies":{"classnames":"^2.3.2"},"gitHead":"0604a8daf9abadb42d33637cc6cfbfb617efa932","_id":"@eisberg-labs/next-image-section@4.0.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-EH6jslYPBIV6hGAqvYyaoQeMFdUk2cu2JpIOOuckCC1rG/0MPl/dgSb/0Om8BDLW8OJaohs36PrxD+agA3haOg==","shasum":"7497c5c439b2272ce70be52cab7c1f2116424586","tarball":"https://registry.npmjs.org/@eisberg-labs/next-image-section/-/next-image-section-4.0.0.tgz","fileCount":11,"unpackedSize":9284,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbdTvZecnrc1+OPS+i6U9PUZirhy2Ej3/suV+5ale/qAiEA7BOvmzwrjvIvF2LLUxfn2PHHPp3Gldffm9XVVXpEr8M="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0Vx2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptQg//ZsTeEcpviVNVnOZQ+WP2Lxfpdv03jJQo8EGZKXLmEST3WUZL\r\nNCnirxaIjDRsU8YGXAtYF47eMU96rCbKk5lTab2xGZ6EuXXii27+fYKPMOFX\r\nwqYHcLnDrL5fv4ZD1rcNBznrCQqGxwzj2xuWxbuF5JzvW+u5FwAy4uBPuT6G\r\ngaXgwp/zqIYoFlY68YUOTxLds9kzkvpi21j9UuYqUYPbd1jyslU60dDeP19E\r\n+4xk+v6ESh2TR4puv/vLGFCqfJHoIvYuk0mVyXc6F4XXOi6PEczyN+MwmA+4\r\nlVMvOAfTcNJR3csj3gm/HgyEGsEqTJbSIY60yWDSyJfuNhOl/WE0S/76Mui8\r\nyu3TG3ZdZmhRdSLuw6x8LfVMkARRiB2pCF2VbmpMVdBXA/sg+Tv44gqU5fMc\r\nqXRYl6SxxscPUWvf5VTUB1Yf8zGPaot+fo9wS4ZEBJbxeLNexil3OvvDE7sO\r\nIK9fcfwD0CAxOr/7jKwucBlFRGTqwewstjzbGWX4NNCDD/YX9oApSPUS7qAA\r\ncHirnRJp5oEf+wvbgxY/PZj2DVaYUqxbgPVEG6L8Y0HVQ1jVna8BZwgm/Rl/\r\nw7Mny4cXiiofjBCkjPVipbY3P1q5KB+41fY9FhTtaOdP/HJDCQ0hJzNM9IHk\r\n4ZPtOnYGGNlWx938IG1aW+xgGKF95aV6yyQ=\r\n=Inig\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"eisberg-labs","email":"ana@eisberg-labs.com"},"maintainers":[{"name":"eisberg-labs","email":"ana@eisberg-labs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-image-section_4.0.0_1674665077965_0.8569298199380941"},"_hasShrinkwrap":false},"4.0.2":{"name":"@eisberg-labs/next-image-section","version":"4.0.2","description":"Image as background, React section with lazy loaded nextjs image as background and tailwind compatible","keywords":["react","nextjs","background","image","lazy","tailwind"],"homepage":"https://www.amarjanica.com/projects/react-components/next-image-section","bugs":{"url":"https://github.com/eisberg-labs/react-components/issues"},"repository":{"type":"git","url":"git+https://github.com/eisberg-labs/react-components.git"},"license":"MIT","author":{"name":"Ana Bujan - Eisberg Labs","email":"ana@eisberg-labs.com","url":"https://www.eisberg-labs.com"},"sideEffects":false,"main":"dist/index.cjs.js","module":"dist/index.esm.js","types":"dist/index.d.ts","directories":{"lib":"dist","test":"__tests__"},"scripts":{"prebuild":"rm -rf dist && npm run test && npm run lint && npm run prettier","build":"rollup -c ../../rollup.config.js","lint":"eslint {src,__tests__}/**/*","prettier":"prettier --write \"./(src|__tests__)/**/*.(ts|tsx)\"","test":"jest -c ../../jest.config.js"},"devDependencies":{"next":"13.1.1","react":"^18.2.0","react-dom":"^18.2.0"},"peerDependencies":{"next":"^12.0.0 || ^13.0.0","react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"publishConfig":{"access":"public"},"documentation":{"title":"Next Image Background Section","thumbnail":"demo.png"},"gitHead":"645f78f22f3252472c6d7f3252754a9fbdf458d6","_id":"@eisberg-labs/next-image-section@4.0.2","_nodeVersion":"16.19.0","_npmVersion":"lerna/6.1.0/node@v16.19.0+x64 (linux)","dist":{"integrity":"sha512-IYQktdb3q80Yxt/QOp7TF/znXfV3LRyWktB+DXPdl7iuusQDHtYshtUqjXYyDgME7/gjsK0AV0Wq2Y/Onfws8A==","shasum":"efdcbd359aa1486f0e082a7652d97faa3ff8b347","tarball":"https://registry.npmjs.org/@eisberg-labs/next-image-section/-/next-image-section-4.0.2.tgz","fileCount":10,"unpackedSize":6974,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFaZz3o785m1lUVriqH6wfr/cbRM6PTKslTKySqL5xFsAiEA7sDWTUx0yi2874F7fCr2wnH/KgylGuoNzG0KPPvq9Ak="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0X75ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpBTQ//dM5RHNHk1u2HkPLj2VfXnmNWCGLbGniu/W9DNFoXOrMUP3hW\r\norjFNVapECHhHNnIQUoRsdmOIRsjdn6hiwVa94yV4oVgPnNG8MtzyNg9KxH3\r\noGA+W2Wl27h0XRO0aJkWIzcMpWn7/njXToaJsHjI5pIcPDRgVMrHmtdKJ2W6\r\nXMjr8DyM8bM2c2xi+oqiyn4vtsJM2aFGNmoeJz2uDyOgs7S23waiYzyfcFqS\r\n6Od5rqh0dRY0uefFTB9hftDGogBT4QjPYn8Je1vhtmFz+tBxCyXuGbSSRye0\r\nxK/fH+mSUHGpwm+PxMx95GiEeph8RlvPZFCKuk3tpGoY4KCYo1JurTsDZE/y\r\nwSbdJ3S3NrDfxaZb06l+tchqRsOfkAq/721YsuQnZI1JFjg7noVWaAj14Uhq\r\ncE+fE7FsQ21+egExrJhtJYYj2j09VT/Wjmdr7t+vpUmrQmH0qYSWuYQ4wwjL\r\nw7htfLO+CSCfTIzLcmwQMfYkK7K7wQoqTr+Db76aJxr5RFHmUYQm19LQ5j3O\r\nfXNZ57Bm6OnX6AxoSiE3wbiMqmNGiDaKNKMdCJXEs0tPWiZYnpOcHiAu+D7o\r\nMuG2jlwlxtDfIOSq5Y6aMwtpT6QMdw0NqkiSHMwhwtos5lqllDM9vcd8evsk\r\nqYuiA2c+SVQ+KVGEvH8dzlo7/qq3QLlXN9I=\r\n=fur0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"eisberg-labs","email":"ana@eisberg-labs.com"},"maintainers":[{"name":"eisberg-labs","email":"ana@eisberg-labs.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-image-section_4.0.2_1674673912825_0.8017736746940622"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-25T16:44:37.887Z","4.0.0":"2023-01-25T16:44:38.182Z","modified":"2023-01-25T19:11:53.133Z","4.0.2":"2023-01-25T19:11:53.053Z"},"maintainers":[{"name":"eisberg-labs","email":"ana@eisberg-labs.com"}],"description":"Image as background, React section with lazy loaded nextjs image as background and tailwind compatible","homepage":"https://www.amarjanica.com/projects/react-components/next-image-section","keywords":["react","nextjs","background","image","lazy","tailwind"],"repository":{"type":"git","url":"git+https://github.com/eisberg-labs/react-components.git"},"author":{"name":"Ana Bujan - Eisberg Labs","email":"ana@eisberg-labs.com","url":"https://www.eisberg-labs.com"},"bugs":{"url":"https://github.com/eisberg-labs/react-components/issues"},"license":"MIT","readme":"[![Downloads](http://img.shields.io/npm/dm/@eisberg-labs/next-image-section.svg)](https://npmjs.org/package/@eisberg-labs/next-image-section)\n# Next Image as Background Section\n> React Section with lazy loaded nextjs image as background and tailwind, server component compatible.\n> Img tag can be used as a background, it's usable for SEO, due to lazy loading and use of alt tags (speed and semantics).\n\n![Example](/packages/next-image-section/docs/demo.png)\n\nIf you 👍 or use this project, consider giving it a ★, thanks! 🙌\n\n## Installation\nPackage uses Nextjs Image component, so having next.js installed is required.\nDon't forget to add [allowed domains](https://nextjs.org/docs/messages/next-image-unconfigured-host) in next.config.js.\n\nComponent is compatible with server only components.\n\n```bash\nnpm i --save @eisberg-labs/next-image-section\n```\n\n## Usage\nImport style.css in your global css file or directly in the component:\n```jsx\nimport ImageSection from '@eisberg-labs/next-image-section';\nimport '@eisberg-labs/next-image-section/style.css';\n\n<ImageSection\n  src={\"https://pixabay.com/images/id-2748776\"}\n  alt={\"Pixabay Milna Croatia photo and picture by k9arteu\"}\n  childClassName={\"container bg-white\"}\n>\n  <p className={\"text-xl\"}>You can see in this example that img tag can work as a background.</p>\n</ImageSection>\n```\n\n## Api\n\n## License\nMIT © [Eisberg Labs](http://www.eisberg-labs.com)\n","readmeFilename":"README.md"}