{"bugs":{"url":"https://github.com/code-hike/codehike/issues"},"dist":{"shasum":"c364f5805446a5232c58fe6e08d00acec8e233c1","tarball":"https://registry.npmjs.org/@code-hike/classer/-/classer-0.3.0-next.27.tgz","fileCount":6,"integrity":"sha512-xWEE9JXETIxTnRKpm27eBraOgXxZ5c8go9ez1t/oP03lN9IquVeNkcuI4W+dvTHMWFZyQOXbvhyIcJfmfjS26A==","signatures":[{"sig":"MEUCIQDHTpTxptaNSr4BRq6OwZhLkJ9GEE6X0T3p9xFR6piyxgIgBjKZJHkl8SdscQzYE0YwC8HqcYVMoul078K3csdfXYQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":10425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiF6YvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpaTxAAj/5NM1qOJ17hnhppDJUyisthMYMMSSYCq66dJ91D9WAAEejX\r\nOSkvLdNFcIOdDrntgKTTrKNVY3OOzvYWLVHEcLBtj363imoUWjrMPh96b/Jf\r\nhL4QsUtFGuqE1y262MG7pqYx1f/11Ebs+N3fugescQj0nNGOnQCrpkV8QSX/\r\nF43j6k/qUXCB6tSS0osrdjtiFCQQV7BOSJ2JYSq0NjTNHlVL9+8RuEu8exMS\r\n5HWe9p9W2Pihvd+9Fe0t7alSbKnCA89kzCmCRREaP7KkJLPG2U4IH63iR7g+\r\nQxLSAKMO8/ZdI7r9Ff2tdvCqlx5iqNcF9UQb77gb24pLgW3HjwPO2VxM+LlJ\r\nqPwpu2o8WPwYJxZ2p7GyKb1da5mGk5DU+KBf4oNo/QZe8225JqjRgW7aBrbg\r\ngzCvTf7S5dTQy1W5rx5FHa6vh2hIwbQC/yckxCGzPhabl59RntAaaLq3Xwpn\r\nzT2pxuHMPA+liVkTZdpjuIaRk3gO1r7obBTv/L1Va0y0IbrF0XytacE53F5n\r\n0jlmObj3/WzmaNqcQUVhtK/Rnu1hpBHn6NVvJbM4pRtMvILxc/FwsdB1rxlz\r\nnY8oZio1Y0Mr3S4XbDUlQ+RmYZZmQ6Mz+RAmrvIriaLEHdpcRDefYFo5SZye\r\n93vCIAiGs7bPrsHqsK/t/dZCA+L9Rde6QvQ=\r\n=vnEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","name":"@code-hike/classer","author":{"name":"Rodrigo Pombo"},"module":"dist/index.esm.js","readme":"> Classer is a tool from [Code Hike](https://codehike.org)\n\nA little package to make React component libraries interoperable with most styling solutions. ([See this twitter thread explaining why this is useful](https://twitter.com/pomber/status/1362125599607820290))\n\nYou write your library code like this:\n\n```jsx\n// foo-library code\nimport { useClasser } from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  const c = useClasser(\"foo\", classes)\n  return (\n    <div className={c(\"container\")}>\n      <h1 className={c(\"title\")}>Hello</h1>\n      <p className={c(\"description\")}>World</p>\n      <img\n        className={c(\"img\")}\n        src=\"https://placekitten.com/200/200\"\n      />\n    </div>\n  )\n}\n```\n\nAnd the library consumers use it like this in their apps:\n\n```jsx\nimport { Foo } from \"foo-library\"\n\nconst classes = {\n  \"foo-title\": \"my-app-blue\",\n  \"foo-img\": \"rounded-corners some-border\",\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n`MyApp` renders this HTML:\n\n```html\n<div class=\"foo-container\">\n  <h1 class=\"foo-title my-app-blue\">Hello</h1>\n  <p class=\"foo-description\">World</p>\n  <img\n    class=\"foo-img rounded-corners some-border\"\n    src=\"https://placekitten.com/200/200\"\n  />\n</div>\n```\n\nExamples:\n\n- [With Emotion](https://codesandbox.io/s/classer-emotion-b7go0)\n- [With Tailwind](https://codesandbox.io/s/classer-tailwind-wfs1d)\n\n## Context\n\nYou can also do this (to avoid passing `classes` to nested components):\n\n```jsx\n// foo-library code\nimport {\n  useClasser,\n  ClasserProvider,\n} from \"@code-hike/classer\"\n\nexport function Foo({ classes }) {\n  return (\n    <ClasserProvider classes={classes}>\n      <FirstChild />\n      <SecondChild />\n    </ClasserProvider>\n  )\n}\n\nfunction FirstChild() {\n  const c = useClasser(\"foo-first\")\n  return <h1 className={c(\"title\")}>Hi</h1>\n}\n\nfunction SecondChild() {\n  const c = useClasser(\"foo-second\")\n  return <h1 className={c(\"title\")}>Ho</h1>\n}\n```\n\n```jsx\nimport { Foo } from \"./foo-library\"\nimport styles from \"./app.module.css\"\n\nconst classes = {\n  \"foo-title\": styles.myTitle,\n  \"foo-img\": styles.myImage,\n}\n\nfunction MyApp() {\n  return <Foo classes={classes} />\n}\n```\n\n## License\n\nMIT\n","funding":{"url":"https://opencollective.com/codehike","type":"opencollective"},"gitHead":"0138068772d700880a75b287d9ee9d60ece5ac41","license":"MIT","scripts":{"x":"x"},"typings":"dist/index.d.ts","_npmUser":{"name":"pomber","email":"pombopombopombo@gmail.com"},"homepage":"https://codehike.org","repository":{"url":"git+https://github.com/code-hike/codehike.git","type":"git"},"_npmVersion":"lerna/4.0.0/node@v14.19.0+x64 (linux)","description":"> Classer is a tool from [Code Hike](https://codehike.org)","directories":{},"maintainers":[{"name":"pomber","email":"pombopombopombo@gmail.com"}],"_nodeVersion":"14.19.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"readme.md","devDependencies":{"react":"^17.0.2","@types/react":"^17.0.2","@code-hike/script":"0.3.0-next.27"},"peerDependencies":{"react":"^16.8.3 || ^17 || ^18"},"_npmOperationalInternal":{"tmp":"tmp/classer_0.3.0-next.27_1645717039534_0.43005258624629383","host":"s3://npm-registry-packages"},"_id":"@code-hike/classer@0.3.0-next.27","version":"0.3.0-next.27"}