{"_id":"@rebass/components","_rev":"3145438","name":"@rebass/components","description":"Create consistent styled-system based React UI components","dist-tags":{"latest":"4.0.0-1"},"maintainers":[{"name":"jxnblk","email":""}],"time":{"modified":"2023-11-27T07:15:05.000Z","created":"2018-09-02T00:22:27.811Z","4.0.0-1":"2018-09-02T21:48:02.325Z","4.0.0-0":"2018-09-02T00:22:27.811Z"},"users":{},"author":{"name":"Brent Jackson"},"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"versions":{"4.0.0-1":{"name":"@rebass/components","version":"4.0.0-1","description":"Create consistent styled-system based React UI components","main":"dist/index.js","scripts":{"prepare":"babel src -d dist && npm run emotion","emotion":"NODE_ENV=emotion babel src -d dist/emotion","cover":"jest --coverage","start":"mdx-go docs","test":"jest"},"keywords":["react","components","styled-system","styled-components","emotion","design-system","theme","css-in-js"],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"author":{"name":"Brent Jackson"},"license":"MIT","dependencies":{"styled-system":"^3.0.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-plugin-transform-rename-import":"^2.3.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","emotion":"^9.2.3","got":"^9.2.0","jest":"^23.3.0","jest-styled-components":"^6.0.1","mdx-go":"^1.0.10","react":"^16.4.1","react-dom":"^16.4.1","react-emotion":"^9.2.3","react-test-renderer":"^16.4.1","shelljs":"^0.8.2","styled-components":"^3.3.2"},"jest":{"testMatch":["**/test.js"],"coverageReporters":["html"]},"gitHead":"59fab7fd34dea2687cb83133817477f0c575d7f7","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"homepage":"https://github.com/jxnblk/styled-system#readme","_id":"@rebass/components@4.0.0-1","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"dist":{"shasum":"00f08f99a3e9db565b685ab23283852fe5f7573f","size":4426,"noattachment":false,"key":"/@rebass/components/-/@rebass/components-4.0.0-1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@rebass/components/download/@rebass/components-4.0.0-1.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/components_4.0.0-1_1535924882145_0.3898881542308579"},"_hasShrinkwrap":false,"publish_time":1535924882325,"_cnpm_publish_time":1535924882325,"_cnpmcore_publish_time":"2021-12-16T19:22:12.549Z"},"4.0.0-0":{"name":"@rebass/components","version":"4.0.0-0","description":"Create consistent styled-system based React UI components","main":"dist/index.js","scripts":{"prepare":"babel src -d dist && npm run emotion","emotion":"NODE_ENV=emotion babel src -d dist/emotion","cover":"jest --coverage","start":"mdx-go docs","test":"jest"},"keywords":["react","components","styled-system","styled-components","emotion","design-system","theme","css-in-js"],"repository":{"type":"git","url":"git+https://github.com/jxnblk/styled-system.git"},"author":{"name":"Brent Jackson"},"license":"MIT","dependencies":{"styled-system":"^3.0.1"},"devDependencies":{"babel-cli":"^6.26.0","babel-plugin-transform-rename-import":"^2.3.0","babel-preset-env":"^1.7.0","babel-preset-react":"^6.24.1","babel-preset-stage-0":"^6.24.1","babel-register":"^6.26.0","emotion":"^9.2.3","jest":"^23.3.0","jest-styled-components":"^6.0.1","mdx-go":"^1.0.10","react":"^16.4.1","react-dom":"^16.4.1","react-emotion":"^9.2.3","react-test-renderer":"^16.4.1","styled-components":"^3.3.2"},"jest":{"testMatch":["**/test.js"],"coverageReporters":["html"]},"gitHead":"6bcd098cf5c7b504b193aa3a1ce908745673e33f","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"homepage":"https://github.com/jxnblk/styled-system#readme","_id":"@rebass/components@4.0.0-0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"dist":{"shasum":"bc67c9ed512c0523a235e7cb559c66cb4aa756f6","size":3825,"noattachment":false,"key":"/@rebass/components/-/@rebass/components-4.0.0-0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@rebass/components/download/@rebass/components-4.0.0-0.tgz"},"maintainers":[{"name":"jxnblk","email":""}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/components_4.0.0-0_1535847747669_0.9616769477107832"},"_hasShrinkwrap":false,"publish_time":1535847747811,"_cnpm_publish_time":1535847747811,"_cnpmcore_publish_time":"2021-12-16T19:22:12.782Z"}},"readme":"\n# @rebass/components\n\nCreate consistent styled-system based React UI components\n(formerly system-components)\n\nBuilt with [styled-system][sys],\nwith support for [styled-components][sc] & [emotion][emotion]\n\n[![Build Status][build-badge]][build]\n\n[build-badge]: https://img.shields.io/travis/rebassjs/components/master.svg?style=flat-square\n[build]: https://travis-ci.org/rebassjs/components\n\n```js\nimport system from '@rebass/components'\n\n// creates a Box with default props tied to your theme\nconst Box = system({\n  p: 2,\n  bg: 'blue'\n}, 'space', 'color')\n```\n\nOr, to use with [emotion][emotion]:\n\n```js\nimport system from '@rebass/components/emotion'\n```\n\n## Usage\n\nTo create a styled-component with default props that hook into [styled-system][sys] props, pass a plain object as the first argument to the `system` function and pass the names of the styled-system functions as arguments after.\n\n```js\nconst Card = system({\n  px: 2,\n  py: 3,\n  border: '1px solid',\n  borderColor: 'lightGray',\n  borderRadius: 2\n}, 'space', 'borders', 'borderColor', 'borderRadius')\n```\n\n@rebass/components automatically adds prop type definitions and removes style props from the underlying HTML element.\n\nSee the [styled-system docs][sys] for a complete list of the available style functions.\n\n### Add style props without defaultProps\n\n@rebass/components can also be created with [styled-system][sys] props without defining `defaultProps`.\n\n```js\nconst Box = system(\n  'space',\n  'width',\n  'color'\n)\n```\n\nThis allows for style props to be passed to the component instance:\n\n```jsx\n<Box\n  width={1/2}\n  px={3}\n  py={4}\n  bg='blue'\n/>\n```\n\n### Using custom functions\n\nCustom style functions can be passed as an argument.\n\n```js\nconst Box = system(\n  props => ({\n    height: props.height\n  })\n)\n```\n\n### Changing the underlying HTML element\n\n@rebass/components default to using a `<div>` as the HTML element.\nTo change the HTML element use the `is` prop.\n\n```js\nconst Heading = system({\n  is: 'h2',\n  m: 0,\n  fontSize: 6\n})\n```\n\nSince `is` is a prop, it can also be passed to the element when used.\nThis is useful for one-off changes to ensure semantic markup.\n\n```js\n<Heading is='h1'>\n  Hello\n</Heading>\n```\n\n### Extending components\n\nTo extend another component, use the `extend` prop in your component definition.\n\n```js\nconst Text = system({\n  fontSize: 2,\n}, 'fontSize')\n\nconst Bold = system({\n  extend: Text,\n  fontWeight: 'bold'\n}, 'fontWeight')\n```\n\n### CSS prop\n\nTo add one-off custom CSS to any @rebass/component, use the `css` prop.\n\n```js\n<Heading css='opacity:0.75;'>\n  Hello\n</Heading>\n```\n\nThe `css` prop can also accept object literal syntax.\n\n```jsx\n<Heading\n  css={{\n    opacity: 3/4\n  }}>\n  Hello\n</Heading>\n```\n\n---\n\n[MIT License](License.md)\n\n[sys]: https://github.com/jxnblk/styled-system\n[sc]: https://github.com/styled-components/styled-components\n[emotion]: https://github.com/emotion-js/emotion\n","_attachments":{},"homepage":"https://github.com/jxnblk/styled-system#readme","bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"license":"MIT"}