{"id":20838784,"url":"https://github.com/royalicing/react-seeds","last_synced_at":"2026-04-19T23:34:29.447Z","repository":{"id":72483412,"uuid":"63521465","full_name":"RoyalIcing/react-seeds","owner":"RoyalIcing","description":"React stylers for nicer Flexbox + CSS","archived":false,"fork":false,"pushed_at":"2016-08-23T12:30:14.000Z","size":27,"stargazers_count":1,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-18T23:43:08.052Z","etag":null,"topics":["css-in-js","inline-styles","react","react-dom","react-style"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RoyalIcing.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2016-07-17T08:11:47.000Z","updated_at":"2016-07-20T06:11:44.000Z","dependencies_parsed_at":"2023-02-23T07:15:13.051Z","dependency_job_id":null,"html_url":"https://github.com/RoyalIcing/react-seeds","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Freact-seeds","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Freact-seeds/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Freact-seeds/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RoyalIcing%2Freact-seeds/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RoyalIcing","download_url":"https://codeload.github.com/RoyalIcing/react-seeds/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243196662,"owners_count":20251861,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-in-js","inline-styles","react","react-dom","react-style"],"created_at":"2024-11-18T01:11:32.769Z","updated_at":"2025-12-27T00:43:30.327Z","avatar_url":"https://github.com/RoyalIcing.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-seeds\n\n[![Travis][build-badge]][build]\n[![npm package][npm-badge]][npm]\n[![Coveralls][coveralls-badge]][coveralls]\n\n```\nnpm i react-seeds --save\n```\n\n## Usage\n\nYou can use *react-seeds* in two ways:\n- `import styler from 'react-seeds'` · You can call this props helper, which you `...` splat into your HTML-based component when rendering. \n- `import { Seed } from 'react-seeds'` · Or you can use the `\u003cSeed\u003e` component and pass each style attribute as a prop.\nBy default it renders a `\u003cdiv\u003e`, but you can change this using the `Component` prop.  \n\nThere are examples of both below:\n\n### Reusable stylers\n\n```javascript\nimport React from 'react'\nimport styler from 'react-seeds'\n\nconst baseStyler = ({ dark }) =\u003e styler({\n  row: true,\n  padding: '1em',\n  relative: {\n    top: '1em',\n    left: '1em'\n  },\n  text: {\n    color: dark ? '#eee' : '#111'\n  },\n  background: {\n    color: dark ? '#222' : '#eee'\n  }\n})\n\nexport function Card({ children, dark = false }) {\n  return (\n    \u003cdiv { ...baseStyler({ dark }) }\u003e\n      { children }\n    \u003c/div\u003e\n  )\n}\n```\n\n### React component styling with props\n\n```javascript\nimport React from 'react'\nimport { Seed } from 'react-seeds'\n\nexport function TwoColumn({ content1, content2 }) {\n  return (\n    \u003cSeed row Component='section'\u003e\n      \u003cSeed minWidth={ 200 } grow={ 1 }\u003e\n        { content1 }\n      \u003c/Seed\u003e\n      \u003cSeed minWidth={ 400 } grow={ 1 }\u003e\n        { content2 }\n      \u003c/Seed\u003e\n    \u003c/Seed\u003e\n  )\n}\n```\n\n## Styler attributes\n\nStyler attributes mostly match CSS’s attribute names, but have some opinionated changes for a nicer experience. \nThis includes nicer flexbox support by removing flex- prefixes,\n`border-box` box sizing by default,\nand use of objects for attributes such as margin, padding, absolute \u0026 relative positioning, text, background, and border.\n\n### boxSizing\n\n- **boxSizing** : *string* = 'border-box'\n- **overflow** : *string*\n- **width** : *number*\n- **height** : *number*\n- **minWidth** : *number*\n- **minHeight** : *number*\n- **maxWidth** : *number*\n- **maxHeight** : *number*\n\n### visibility\n\n- **visibility** : *string*\n- **opacity** : *number*\n\n### flex\n\n- **row** : *boolean* = false\n- **column** : *boolean* = false\n- **wrap** : *boolean* = false\n- **reverse** : *boolean* = false\n- **alignItems** : *string*\n- **alignContent** : *string*\n- **justifyContent** : *string*\n- **basis** : *string*\n- **grow** : *number*\n- **shrink** : *number*\n- **alignSelf** : *string*\n\n### position\n\n- **absolute** : *object*\n  - **top** : *number?*\n  - **bottom** : *number?*\n  - **left** : *number?*\n  - **right** : *number?*\n- **relative** : *object*\n  - **top** : *number?*\n  - **bottom** : *number?*\n  - **left** : *number?*\n  - **right** : *number?*\n- **zIndex** : *number*\n\n### margin\n\n- **margin** : *number | string | object:*\n  - **top** : *number?*\n  - **bottom** : *number?*\n  - **left** : *number?*\n  - **right** : *number?*\n\n### padding\n\n- **padding** : *number | string | object:*\n  - **top** : *number?*\n  - **bottom** : *number?*\n  - **left** : *number?*\n  - **right** : *number?*\n\n### text\n\n- **text** : *object:*\n  - **color** : *string?*\n  - **align** : *string?*\n  - **indent** : *string?*\n  - **overflow** : *string?*\n  - **transform** : *string?*\n  - **decoration** : *string?*\n  - **shadow** : *string?*\n  - **rendering** : *string?*\n\n### font\n\n- **font** : *object:*\n  - **family** : *string?*\n  - **size** : *number? | string?*\n  - **weight** : *number? | string?*\n  - **style** : *string?*\n  - **stretch** : *string?*\n  - **variant** : *string?*\n  - **kerning** : *string?*\n\n### background\n\n- **background** : *string | object:*\n  - **color** : *string?*\n  - **image** : *string?*\n  - **position** : *string?*\n  - **size** : *string?*\n  - **origin** : *string?*\n  - **clip** : *string?*\n  - **repeat** : *boolean? | string?*\n  - **attachment** : *string?*\n\n### border\n\n- **borderRadius / cornerRadius** : *number*\n- **border** : *string | object:*\n  - **width** : *number?*\n  - **style** : *string?*\n  - **color** : *color?*\n\n\n[build-badge]: https://img.shields.io/travis/BurntCaramel/react-seeds/master.svg?style=flat-square\n[build]: https://travis-ci.org/BurntCaramel/react-seeds\n\n[npm-badge]: https://img.shields.io/npm/v/react-seeds.svg?style=flat-square\n[npm]: https://www.npmjs.org/package/react-seeds\n\n[coveralls-badge]: https://img.shields.io/coveralls/BurntCaramel/react-seeds/master.svg?style=flat-square\n[coveralls]: https://coveralls.io/github/BurntCaramel/react-seeds\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalicing%2Freact-seeds","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froyalicing%2Freact-seeds","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froyalicing%2Freact-seeds/lists"}