{"_id":"@croquiscom/storybook-addon-backgrounds","_rev":"39-ffcee6f8db8c77e57b143b3bd29ae209","name":"@croquiscom/storybook-addon-backgrounds","dist-tags":{"latest":"0.1.0"},"versions":{"0.0.1":{"name":"@croquiscom/storybook-addon-backgrounds","version":"0.0.1","keywords":["addon","background","react","storybook"],"author":{"name":"jbaxleyiii"},"license":"MIT","_id":"@croquiscom/storybook-addon-backgrounds@0.0.1","maintainers":[{"name":"croquiscom","email":"admin@croquis.com"}],"homepage":"https://storybook.js.org","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"bab8524405ed4cf8b647652a8fbef645f2b8ad7b","tarball":"https://registry.npmjs.org/@croquiscom/storybook-addon-backgrounds/-/storybook-addon-backgrounds-0.0.1.tgz","fileCount":18,"integrity":"sha512-gwfoN3fJxgbUaeFg6CWSLxKM7LxPYyL5derCp9m1uyLdlvCzf8JBWk3A45Cy0hGxnrkiwPPVK2QgZ6m5NouzmA==","signatures":[{"sig":"MEUCIQCNt2vP4FujkNkB7LO+IENwCg80v4KgO7UOb7ek3ZHliAIgTP0bfqLyaJM1kGhkiA/oQ/vJSFiAaTrAliPlcaoIS+E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36788},"main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"croquiscom","email":"admin@croquis.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.5.1","description":"A storybook addon to show different backgrounds for your preview","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","prop-types":"^15.6.1","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/storybook-addon-backgrounds_0.0.1_1521186556739_0.8092060605898967","host":"s3://npm-registry-packages"}},"0.0.2":{"name":"@croquiscom/storybook-addon-backgrounds","version":"0.0.2","keywords":["addon","background","react","storybook"],"author":{"name":"jbaxleyiii"},"license":"MIT","_id":"@croquiscom/storybook-addon-backgrounds@0.0.2","maintainers":[{"name":"croquiscom","email":"admin@croquis.com"}],"homepage":"https://storybook.js.org","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"0573bbae6d056330aed3a2adaf5028bef5ee9a3f","tarball":"https://registry.npmjs.org/@croquiscom/storybook-addon-backgrounds/-/storybook-addon-backgrounds-0.0.2.tgz","fileCount":18,"integrity":"sha512-oUN7nWXNdpyWtz5sA0roZvp6eiescdQTrohVA3KL8itBiPP9bc60Fpi4fH9jybb1qzZXKgXqxRSdJt4AOFpHhQ==","signatures":[{"sig":"MEUCIQDL02kBcReKlZQMN8BOMqwwfCE/eZWtXiO+COvQATrK6AIgGZPMFtVuShSfUtb84kRc9aA6amuw6QKmpT+e392S4Ng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36770},"main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"croquiscom","email":"admin@croquis.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.5.1","description":"A storybook addon to show different backgrounds for your preview","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","prop-types":"^15.6.1","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/storybook-addon-backgrounds_0.0.2_1521211850918_0.3166360506696384","host":"s3://npm-registry-packages"}},"0.1.0":{"name":"@croquiscom/storybook-addon-backgrounds","version":"0.1.0","keywords":["addon","background","react","storybook"],"author":{"name":"jbaxleyiii"},"license":"MIT","_id":"@croquiscom/storybook-addon-backgrounds@0.1.0","maintainers":[{"name":"croquiscom","email":"admin@croquis.com"}],"homepage":"https://storybook.js.org","bugs":{"url":"https://github.com/storybooks/storybook/issues"},"dist":{"shasum":"b8b71c2d4aed1c762b6d3d958c66c944b963d0b5","tarball":"https://registry.npmjs.org/@croquiscom/storybook-addon-backgrounds/-/storybook-addon-backgrounds-0.1.0.tgz","fileCount":18,"integrity":"sha512-ct/wo5k81EmdQS+Z05my/53OTTHaA4JruYhHza4vOc+GJeSjbTe+v50wWqPmOvIulM1NwflF+o+XiHPinGQWyw==","signatures":[{"sig":"MEQCIG2VmMtwX/v2yyy2p5x1BShMNYJkZz4W8Gy8d9BqipkjAiB/eIzczOpjlGbcfEl5T9eURwufBodvT0KlMFAAIJCcMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":36948,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2DefCRA9TVsSAnZWagAAjvwP/3HuEtOqlW5hWfaEd00T\nMt5V6qggBnG/h7tnWCklTfeSyth29gQuV8hsnraQ7lqKHFGNDccpEzz0GwOy\nR+URCN2bcbTM59BaSra1mMzkQW8MyJjIjefgfoufwzQQMVTclSSjLM12PTsa\n4gkdTxWsJ5jpHUFHwMhfd1TMrHLLIgQbYPrviTwShVM7Vk8tzPu0c1RqZ+YU\nei2Y9TiZr1zzt1PVfB9OHaYXEsBoTAEhckGBfwzgRGioegupniwVDCrR7eg/\nVOWZsaBwtSYO7V57l6ZT/r8oV4UUWK7+vyxJIB8Lx4UctQ2Iy2yUOTHPwJkT\nJufj7bbPOjv0OplQp2E4NOV+Q3T8RkPjjTTr6Ml3PoCntFdIyj1MMn8XNfie\nBNxyqUFcTGSoe5Ah1RcnAq/1cXQL7lvWco/lj4N+QGhQn4DjlBXpUHEcTPXD\nhQniyFxKHK8K0rpc5p4CHey25ducgNrFVArKJSSZ2IemOzaauWPGyAE9BP/N\n4SI2PHe+CwQNkCCXB3TJNXGQE7y6KemUkQ1GV7+KWb61wGAgHhngkveKAXUW\nKE3IuTeQYeyDsVWbwZYr/tTzXKs48vgZbMc40H/Cz3xr/eNhsoS2aQYshfaE\ndMse/4hBmN07Fm0HX9rM1iE/pSrMdkN7pfb+v/jNw7JRFNSBVekYnN5VZGF6\nPiSz\r\n=tLZ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","scripts":{"prepare":"node ../../scripts/prepare.js"},"_npmUser":{"name":"croquiscom","email":"admin@croquis.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"_npmVersion":"5.5.1","description":"A storybook addon to show different backgrounds for your preview","directories":{},"jsnext:main":"src/index.js","_nodeVersion":"8.9.0","dependencies":{"global":"^4.3.2","prop-types":"^15.6.1","babel-runtime":"^6.26.0"},"_hasShrinkwrap":false,"peerDependencies":{"react":"*","@storybook/addons":"^3.3.0"},"_npmOperationalInternal":{"tmp":"tmp/storybook-addon-backgrounds_0.1.0_1522115864859_0.20228427471587063","host":"s3://npm-registry-packages"}}},"time":{"created":"2018-03-16T07:49:16.686Z","modified":"2026-08-06T05:50:10.194Z","0.0.1":"2018-03-16T07:49:16.803Z","0.0.2":"2018-03-16T14:50:50.978Z","0.1.0":"2018-03-27T01:57:44.921Z"},"bugs":{"url":"https://github.com/storybooks/storybook/issues"},"author":{"name":"jbaxleyiii"},"license":"MIT","homepage":"https://storybook.js.org","keywords":["addon","background","react","storybook"],"repository":{"url":"git+https://github.com/storybooks/storybook.git","type":"git"},"description":"A storybook addon to show different backgrounds for your preview","maintainers":[{"email":"joo.inthezoo@kakaostyle.com","name":"joointhezoo"},{"email":"admin.dev@kakaostyle.com","name":"croquiscom-admin"},{"email":"sixmen@gmail.com","name":"sixmen"},{"email":"hexa1214@gmail.com","name":"zao1214"},{"email":"hbh2692@naver.com","name":"nabigraphics"},{"email":"colin.kwon@kakaostyle.com","name":"colin.kwon"},{"email":"pepper.ha@kakaostyle.com","name":"pepper.ha"},{"email":"sally.914@kakaostyle.com","name":"olive-sally"},{"email":"yoo2001818@gmail.com","name":"yoo2001818"},{"email":"tim.jlee@kakaostyle.com","name":"tim.jlee"},{"email":"dark.0@kakaostyle.com","name":"dark.0"},{"email":"gommpo111@gmail.com","name":"sungin"},{"email":"joe.725@kakaostyle.com","name":"joe.725"},{"email":"day.0709@kakaostyle.com","name":"day.0709"},{"email":"dan.psk@kakaostyle.com","name":"dan.psk"},{"email":"evan.oh@kakaostyle.com","name":"minhyung"}],"readme":"# Storybook Addon Backgrounds\n\n[](https://circleci.com/gh/storybooks/storybook)\n[](https://www.codefactor.io/repository/github/storybooks/storybook)\n[](https://snyk.io/test/github/storybooks/storybook/8f36abfd6697e58cd76df3526b52e4b9dc894847)\n[](https://bettercodehub.com/results/storybooks/storybook) [](https://codecov.io/gh/storybooks/storybook)\n[](https://now-examples-slackin-rrirkqohko.now.sh/)\n[](#backers) [](#sponsors)\n\n* * *\n\nStorybook Background Addon can be used to change background colors inside the preview in [Storybook](https://storybook.js.org).\n\n[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)\n\n\n\n## Installation\n\n```sh\nnpm i -D @storybook/addon-backgrounds\n```\n\n## Configuration\n\nThen create a file called `addons.js` in your storybook config.\n\nAdd following content to it:\n\n```js\nimport '@storybook/addon-backgrounds/register';\n```\n\n## Usage\n\nThen write your stories like this:\n\n```js\nimport React from 'react';\nimport { storiesOf } from \"@storybook/react\";\nimport backgrounds from \"@storybook/addon-backgrounds\";\n\nstoriesOf(\"Button\", module)\n .addDecorator(backgrounds([\n { name: \"twitter\", value: \"#00aced\", default: true },\n { name: \"facebook\", value: \"#3b5998\" },\n ]))\n .add(\"with text\", () => );\n```\n\nOf course it's easy to create a library module so you can re-use:\n\n```js\nimport addonBackgrounds from \"@storybook/addon-backgrounds\";\n\nexport const backgrounds = addonBackgrounds([\n { name: \"twitter\", value: \"#00aced\", default: true },\n { name: \"facebook\", value: \"#3b5998\" },\n]);\n```\n\n```js\nimport React from 'react';\nimport { storiesOf } from \"@storybook/react\";\n\nimport { backgrounds } from \"./my-lib\";\n\nstoriesOf(\"Button\", module)\n .addDecorator(backgrounds)\n .add(\"with text\", () => );\n```\n\n> In the case of Mithril, use these imports:\n>\n> ```js\n> import { storiesOf } from '@storybook/mithril';\n> import backgrounds from \"@storybook/addon-backgrounds/mithril\";\n> ```\n","readmeFilename":"README.md"}