{"_id":"@arist0tl3/koji-react-beta-components","_rev":"2-780307b6b59c066093fc9e214d00a65c","name":"@arist0tl3/koji-react-beta-components","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@arist0tl3/koji-react-beta-components","version":"0.0.1","description":"","main":"./lib/index.js","license":"MIT","scripts":{"build":"webpack"},"dependencies":{},"peerDependencies":{"@babel/runtime":"^7.11.2","prop-types":"^15.7.2","react":">=16.8.0","react-dom":">=16.8.0","react-responsive-modal":"^5.1.1","styled-components":"^4.2.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-transform-runtime":"^7.11.5","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","@babel/runtime":"^7.11.2","babel-loader":"^8.1.0","css-loader":"^3.5.1","eslint":"^7.8.1","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.6","eslint-plugin-react-hooks":"^4.1.0","exports-loader":"^0.7.0","html-loader":"^0.5.5","html-webpack-plugin":"^3.2.0","path":"^0.12.7","prop-types":"^15.7.2","react":">=16.8.0","react-dom":">=16.8.0","react-responsive-modal":"^5.1.1","style-loader":"^1.1.3","styled-components":"^4.2.0","webfontloader":"^1.6.28","webpack":"^5.1.3","webpack-cli":"^4.0.0","webpack-dev-server":"^3.11.0"},"gitHead":"f3ac9d1b9bb78425ba1ab0e2b05b18f1371f1165","_id":"@arist0tl3/koji-react-beta-components@0.0.1","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-363ageuCFB4zPRSycfo6L4+8Tnm4l3TYu04clcDP1WDjw5Jx9qbkL0mdvkADIV17O8b24uDhQR/SGBczn2Nyjg==","shasum":"f111f0d529855f5597e90ed2b6f34239f64e358a","tarball":"https://registry.npmjs.org/@arist0tl3/koji-react-beta-components/-/koji-react-beta-components-0.0.1.tgz","fileCount":10,"unpackedSize":89160,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfijZqCRA9TVsSAnZWagAAsTkQAJSlacEELMk5hz8vBpT2\n0RjqL8OwZc5d3amO9MS76bY4Tkqc6gReVzNFxcmfjxyn26hvEQG2FO/zzDN5\nIj4MvGLdmNny80NKGEwWoV9ruQQit95IkzmVgDZyb28dpMBWUCTw2PFxL8LO\nS657tJoc7QkMPH5dAnMHrjHovoE8sQPrtTqIurIKLJKt48WHYVsWbnKR6s8A\nT7KQ7aNnXGFOOwFM+aNPbXgXQH0hWjo77mXb0lzamM9nRIaG9yoX9Lqd/aKa\nMg/LIhCCQTJ1IIHeAUqEQrBPdN66n5ygiPImY0DdCuilTGQ9rOeux8ncbtZC\nK5Ifw62Usv9wmT/C46rYgoahMvlya7nM6SLFPJHX+f/FRoI4tgvECmwCZ1HR\nUi54jn/BpTmTcGiM7RFPSYjbNYGOj7pJvBEz1Qu6vW3pceQ9iKenr6XKC+qo\nmx8P0cwV3FDBsDJ+xv/uMaseZ9Yw9hKsNMG2oID2ibK2AIjpGbAEIe2RtxRN\n8gPNaeRwfDS2ffZr83t4HKci1VX7r2PmBcUvC0ghrjgXk1EV7kru3XsSMdiX\nwsyLKecZLWDPgA1av9iQvHgf7NZQimeqlewNn7tr+VlyeNhDiQJNoxrPTtXy\nHhTdsx24Dvs+yZtfPHSvU0kNdEIulfSzE0rkiLLVnkBgJdXxebpSIXTg6mcY\nIt+L\r\n=Uaxt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq/kGqhDzB9hsEkpdw1WH5ea/3+vUQJ9pZmxnQEpW/ygIgA9uIk5+2b92a7tdcOlkIZkFo6rpxsf+Rrc13Lux0L5I="}]},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"_npmUser":{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/koji-react-beta-components_0.0.1_1602893417941_0.17537537412891857"},"_hasShrinkwrap":false},"0.0.2":{"name":"@arist0tl3/koji-react-beta-components","version":"0.0.2","description":"## Installation","main":"./lib/index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/arist0tl3/koji-react-beta-components.git"},"scripts":{"build":"webpack"},"dependencies":{},"peerDependencies":{"@babel/runtime":"^7.11.2","prop-types":"^15.7.2","react":">=16.8.0","react-dom":">=16.8.0","react-responsive-modal":"^5.1.1","styled-components":"^4.2.0","webfontloader":"^1.6.28"},"devDependencies":{"@babel/core":"^7.4.3","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-transform-runtime":"^7.11.5","@babel/preset-env":"^7.4.3","@babel/preset-react":"^7.0.0","@babel/runtime":"^7.11.2","babel-loader":"^8.1.0","css-loader":"^3.5.1","eslint":"^7.8.1","eslint-config-airbnb":"^18.2.0","eslint-plugin-import":"^2.22.0","eslint-plugin-jsx-a11y":"^6.3.1","eslint-plugin-react":"^7.20.6","eslint-plugin-react-hooks":"^4.1.0","exports-loader":"^0.7.0","html-loader":"^0.5.5","html-webpack-plugin":"^3.2.0","path":"^0.12.7","prop-types":"^15.7.2","react":">=16.8.0","react-dom":">=16.8.0","react-responsive-modal":"^5.1.1","style-loader":"^1.1.3","styled-components":"^4.2.0","webfontloader":"^1.6.28","webpack":"^5.1.3","webpack-cli":"^4.0.0","webpack-dev-server":"^3.11.0"},"gitHead":"f3ac9d1b9bb78425ba1ab0e2b05b18f1371f1165","bugs":{"url":"https://github.com/arist0tl3/koji-react-beta-components/issues"},"homepage":"https://github.com/arist0tl3/koji-react-beta-components#readme","_id":"@arist0tl3/koji-react-beta-components@0.0.2","_nodeVersion":"13.7.0","_npmVersion":"6.13.6","dist":{"integrity":"sha512-o6rTOZOgcWLIXTO7brJUIvx2OarUhJMVw/fUuu03qu6djxFukLI4zbvmmM4XsXgHz5N7SlCM/svf6ULPhDi58Q==","shasum":"9d6ed1c232ac57b60e8ea3dc7c523d69a6a3b3f2","tarball":"https://registry.npmjs.org/@arist0tl3/koji-react-beta-components/-/koji-react-beta-components-0.0.2.tgz","fileCount":10,"unpackedSize":91635,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfij/YCRA9TVsSAnZWagAAU4EP/0ldAtr6SS2cnjp2ccNw\nfyCMOG1MXB8DDLst/zd0oQewajOzFXz/gkHXLiVzHuo3LU+yQYJFOs+MvO0a\nW00E9kfS3XSv56iasEE4tvNu+VhTVWD4tNOCNwQNvE1Ql2jD5QmVPa6pdBLb\nPfnlxQdSs5VRoE1k6h0QYUHfMkYmHz6eqnKafIB46MFTc0S8ztlsjURC6vaA\nN6cPiVv+q0LLqiwlpl6tgawnBOdp0lDBE/f9TVwoYDgsmwjDW+OVGNALEoeU\n6EgMatVI//p9m87D9eKd0Kvr90BO+HVarRvkrKOTQq0Bud5M9hsa5+GGwXrJ\ne92lhp2CaUqw+NkbhSnFJFbOtRH+tlMCMIPp6CuSxAxDO1RR7iIKxOntnSbV\nxvHyhrCVByd9d6s1HbhPuNTahfK3FAHOC9CFZPIVrF+0fKHmmRiYFP21N24H\nT20KCkFRFkJ8bwtrOwJX5I00Fw7Ccs/0/7cKeaBpwvvuxBVtVZcsGc1wy2bg\nEIYBfcNg359BWxe3dVdv8xM9bXjaJbdks0XJJX8ShGTqn4zUQ5sCu3nPylm8\nWtwqE9IW89qpH2a7sPn6UkWIHYxTx0i42LIynPa5LF6zdbdKOXI13gkPqLL3\nvPrx4/G7wnbz3BmgmMdRZkVLO9InaNO/Q0wO9OGuhEBiqyvPZij6C1guytrg\nMPwN\r\n=fYeT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGhtbtecxFie9dQ3X8FBcfyelakJ2WIcYyB9l5anZAdAiAK4AzUBryDE6LEgMUXkGfPNqakw9y1+MPfexrTNicKdA=="}]},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"_npmUser":{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/koji-react-beta-components_0.0.2_1602895832392_0.9599932382702572"},"_hasShrinkwrap":false}},"time":{"created":"2020-10-17T00:10:17.908Z","0.0.1":"2020-10-17T00:10:18.124Z","modified":"2022-04-04T15:27:53.309Z","0.0.2":"2020-10-17T00:50:32.529Z"},"maintainers":[{"name":"arist0tl3","email":"sean@vigorwebsolutions.com"}],"license":"MIT","readme":"# koji-react-beta-components\n\n## Installation\n\n`npm install --save @arist0tl3/koji-react-beta-components`\n\n## Usage\n\nSee below for a basic example. You can also check out https://withkoji.com/~seane/text-component-test for a live example.\n\n```\n/* eslint-disable jsx-a11y/click-events-have-key-events */\n/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\n\nimport get from 'utils/get';\nimport useStore from 'Store/useStore';\nimport { InstantRemixing } from '@withkoji/vcc';\n\nimport { EditTextModal } from '@arist0tl3/koji-react-beta-components';\n\nconst Container = styled.div`\n  width: 100vw;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #333333;\n  color: #ffffff;\n`;\n\nconst Remix = () => {\n  const instantRemixing = new InstantRemixing();\n\n  const [isEditingTitle, setIsEditingTitle] = useState(false);\n\n  const [title, setTitle] = useState(instantRemixing.get(['strings', 'title']));\n  const [titleColor, setTitleColor] = useState(instantRemixing.get(['strings', 'titleColor']));\n  const [titleFontFamily, setTitleFontFamily] = useState(instantRemixing.get(['strings', 'titleFontFamily']));\n  const [titleStyle, setTitleStyle] = useState(instantRemixing.get(['strings', 'titleStyle']));\n\n  useEffect(() => {\n    instantRemixing.onValueChanged(() => {\n      // Handle state updates\n    });\n\n    instantRemixing.ready();\n  }, []);\n\n  return (\n    <Container>\n      <h1\n        onClick={() => setIsEditingTitle(true)}\n        style={{\n          color: titleColor,\n          fontFamily: titleFontFamily,\n          ...titleStyle,\n        }}\n      >\n        {title}\n      </h1>\n      <EditTextModal\n        fontValue={{\n          fontFamily: titleFontFamily,\n          style: titleStyle,\n        }}\n        onColorChange={(color) => {\n          instantRemixing.onSetValue(['strings', 'titleColor'], color);\n        }}\n        onFontChange={({ fontFamily, style = {} }) => {\n          instantRemixing.onSetValue(['strings', 'titleFontFamily'], fontFamily);\n        }}\n        onTextBlur={(val) => {\n          instantRemixing.onSetValue(['strings', 'title'], val);\n        }}\n        onCloseModal={() => setIsEditingTitle(false)}\n        open={isEditingTitle}\n        textValue={title}\n      />\n    </Container>\n  );\n};\n\nexport default Remix;\n```","readmeFilename":"README.md","description":"## Installation","homepage":"https://github.com/arist0tl3/koji-react-beta-components#readme","repository":{"type":"git","url":"git+https://github.com/arist0tl3/koji-react-beta-components.git"},"bugs":{"url":"https://github.com/arist0tl3/koji-react-beta-components/issues"}}