30:[] 2e:{"title":"React Styled","cells":[{"id":0,"value":"md`# React Styled`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`## React with Styled Components in Observable\n\nUsing [Jed Fox](/@j-f1)'s [React](/@jh-f1/react) setup we borrow the \\`__SECRET_REQUIRE\\` export to load the \\`styled-components\\` and re-export it here.\n\nSimply import \\`styled\\` from this notebook:\n\n\\`\\`\\`js\nimport { styled } from '@elisk/styled'\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"BigRed = styled.span`\n font-size: 2em;\n color: red;\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"render(() => jsx`

Hello, <${BigRed}>Styled!

`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"NiceContainer = styled.main`\nmin-height: 320px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-transform: uppercase;\n color: #777;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"render(() => jsx`<${NiceContainer}>Hello, Styled!`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"CoolCircle = styled.div`\n\n position: relative;\n height: 200px;\n width: 200px;\n background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);\n border-radius: 50%;\n animation: rotate 1.5s linear infinite;\n\n.outer-circle span {\n position: absolute;\n height: 200px;\n width: 200px;\n background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);\n border-radius: 50%;\n}\n\nspan:nth-child(1) {\n filter: blur(5px);\n}\n\nspan:nth-child(2) {\n filter: blur(10px);\n}\n\nspan:nth-child(3) {\n filter: blur(25px);\n}\n\nspan:nth-child(4) {\n filter: blur(150px);\n}\n\n.inner-circle {\n height: 180px;\n width: 180px;\n position: absolute;\n background: black;\n top: 10px;\n left: 10px;\n border-radius: 50%;\n z-index: 9;\n}\n\n@keyframes rotate {\n 0% {\n filter: hue-rotate(0deg);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"render(() => jsx`\n <${NiceContainer}>\n <${CoolCircle}>\n

\n \n \n \n \n\n \n \n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`## Exports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"styled = requires('styled-components')","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Dependecies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"import { render, component, jsx, useState, __SECRET_REQUIRE } from '@j-f1/react'","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"styledVersion = \"4.3.2\" // https://github.com/styled-components/styled-components/releases","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"requires = __SECRET_REQUIRE.alias({\n \"styled-components\": `https://unpkg.com/styled-components@${styledVersion}/dist/styled-components.min`\n})","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}