{"id":14972524,"url":"https://github.com/eightyfive/react-native-spacesheet","last_synced_at":"2026-03-02T15:31:31.634Z","repository":{"id":34049571,"uuid":"167350476","full_name":"eightyfive/react-native-spacesheet","owner":"eightyfive","description":"Quick \u0026 consistent margin / padding","archived":false,"fork":false,"pushed_at":"2023-03-04T03:36:36.000Z","size":2097,"stargazers_count":0,"open_issues_count":15,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-26T12:03:08.212Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eightyfive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2019-01-24T10:39:07.000Z","updated_at":"2022-07-06T17:08:46.000Z","dependencies_parsed_at":"2024-09-14T15:57:04.884Z","dependency_job_id":"e9af269f-8eb2-4d84-a828-4ba298aaa8af","html_url":"https://github.com/eightyfive/react-native-spacesheet","commit_stats":{"total_commits":66,"total_committers":3,"mean_commits":22.0,"dds":"0.045454545454545414","last_synced_commit":"4a2477f6fc76dd332a33ab1f398bbd651afab6b9"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-spacesheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-spacesheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-spacesheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eightyfive%2Freact-native-spacesheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eightyfive","download_url":"https://codeload.github.com/eightyfive/react-native-spacesheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240466796,"owners_count":19805862,"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":[],"created_at":"2024-09-24T13:47:03.144Z","updated_at":"2026-03-02T15:31:31.542Z","avatar_url":"https://github.com/eightyfive.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `react-native-spacesheet`\n\nQuick \u0026 consistent margin / padding. Spacesheeeeeeeeeeet…!\n\n\u003cimg src=\"spaceship.jpg\" /\u003e\n\n## [DEPRECATED]\n\nUse [`react-native-themesheet`](https://github.com/eightyfive/react-native-themesheet) + [`react-native-col`](https://github.com/eightyfive/react-native-col) instead.\n\n## Installation\n\n```\nyarn add react-native-spacesheet\n```\n\n## Usage\n\nCreate your space sheet given a set of sizes:\n\n```js\n// src/space.js\nimport SpaceSheet from 'react-native-spacesheet';\n\nconst space = new SpaceSheet.create([0, 5, 10, 20, 40]);\n\nexport const s = space.styles;\nexport const ss = space.sheets;\n\nexport default space;\n```\n\nOptionally create a `Box` [view](https://reactnative.dev/docs/view) that accepts spacing shorthands as properties:\n\n```js\n// src/box.js\nimport { makeView } from 'react-native-spacesheet';\n\nimport space from './space';\n\nexport default makeView(space);\n\n\n// Usage:\n\u003cBox p={3} /\u003e\n\u003cBox pv=\"4\" /\u003e\n\u003cBox m=\"4 2 1 1\" /\u003e\n```\n\nOr use the styles and/or sheets directly in your components:\n\n```js\n// src/components/foo.js\nimport { s, ss } from '../space';\n\n// plain styles (`s.p1`)\nconst styles = StyleSheet.create({\n  ...s.p1,\n  flex: 1,\n});\n\n// And/or sheets (`ss.mb3`)\nconst Foo = () =\u003e \u003cView style={[ss.mb3, styles.container]} /\u003e;\n// { marginBottom: 20, padding: 5, flex: 1 }\n```\n\n## Auto-generated styles\n\n`space.styles` and `space.sheets` are Proxies that create a style according to a given _alias_.\n\n```js\nspace.styles.mb0; // { marginBottom: 0 }\n```\n\n- `sheets.*` returns style sheets\n- `styles.*` returns plain style objects\n\n### Style alias\n\nAn alias is made of 3 parts:\n\n- A \"spacing\": either margin or padding\n- A \"side\": either top, right, bottom, left, vertical or horizontal\n- A \"size\" _index_: `[0-9]`\n\nThe \"spacing\" and \"side\" parts are aliased like so:\n\n```js\nconst [, spacing, side, size] = /(m|p)|(t|r|b|l||v|h)?(\\d+)/.exec('mb0');\n\nspacing; // \"m\"\nside; // \"b\"\nsize; // \"0\"\n```\n\nYou can pass your own aliases to the `create` method:\n\n```js\nconst space = SpaceSheet.create([0, 5, 10, 20, 40], myAliases);\n```\n\nBut here are the default ones:\n\n```js\nconst defaultAliases = {\n  m: 'margin',\n  mt: 'marginTop',\n  mr: 'marginRight',\n  mb: 'marginBottom',\n  ml: 'marginLeft',\n  mv: 'marginVertical',\n  mh: 'marginHorizontal',\n  p: 'padding',\n  pt: 'paddingTop',\n  pr: 'paddingRight',\n  pb: 'paddingBottom',\n  pl: 'paddingLeft',\n  pv: 'paddingVertical',\n  ph: 'paddingHorizontal',\n};\n```\n\n## Size \"indexes\"\n\nMargin and padding sizes are inspired by [Bootstrap v4 spacing utility system](https://getbootstrap.com/docs/4.0/utilities/spacing/).\n\nMeaning that you don't use the actual size for your styles, but its index instead:\n\n```js\nconst space = SpaceSheet.create([0, 5, 10, 20, 40]);\n//                    indexes = [0, 1,  2,  3,  4]\n\nspace.styles.mb1; // { marginBottom: 5 }\nspace.sheets.pt3; // { paddingTop: 20 }\n```\n\nThis helps you to keep spacing consistent throughout your project.\n\n## API\n\n### `create(sizes, aliases = defaultAliases)`\n\nUsing the default aliases:\n\n```js\nconst space = SpaceSheet.create([0, 5, 10, 15, 20]);\n\nspace.sizes; // [0, 5, 10, 15, 20]\n//              [0, 1,  2,  3,  4]\n```\n\nOr specifying yours:\n\n```js\nconst space = SpaceSheet.create([0, 5, 10, 15, 20], {\n  Mar: 'margin',\n  MarT: 'marginTop',\n  MarR: 'marginRight',\n  MarB: 'marginBottom',\n  MarL: 'marginLeft',\n  MarY: 'marginVertical',\n  MarX: 'marginHorizontal',\n  Pad: 'padding',\n  PadT: 'paddingTop',\n  PadR: 'paddingRight',\n  PadB: 'paddingBottom',\n  PadL: 'paddingLeft',\n  PadY: 'paddingVertical',\n  PadX: 'paddingHorizontal',\n});\n```\n\nIt will work with the following aliases:\n\n```\nMarT, MarR, MarB, ..., PadT, ..., PadY, PadX.\n```\n\n### `sheets` (Proxy)\n\nCreates (and cache) aliased style sheets on-the-fly.\n\n```js\nconst ss = space.sheets;\n\n\u003cView style={ss.mb0} /\u003e;\n```\n\n### `styles` (Proxy)\n\nCreates (and cache) aliased plain styles on-the-fly.\n\n```js\nconst s = space.styles;\n\nconst styles = StyleSheet.create({\n  container: {\n    ...s.p3,\n    flex: 3,\n    flexDirection: 'column-reverse',\n    // ...\n  },\n});\n\n\u003cView style={styles.container} /\u003e;\n```\n\n## Col / Row – \"dial\"\n\nYou can also specify quick flexbox styles thanks to the magic \"dial\" property:\n\n```js\nspace.sheets.row5;\nspace.styles.col8;\n// ...\n```\n\n`(row|col)` gives the main axis direction, while the following `[1-9]` number specifies the \"dial number\" to align / justify the children against.\n\nSee more information about the \"dial number\" syntax in the [react-native-col](https://github.com/eightyfive/react-native-col) project documentation.\n\n## Flex\n\nThe `f([0-9])` property assigns quick flex grow values:\n\n```js\nspace.sheets.f1; // { flex: 1 }\nspace.styles.f2; // { flex: 2 }\n// Etc...\n```\n\n## Credits\n\n- [Aleut CSS](http://aleutcss.github.io/documentation/utilities-spacing/) for the initial idea\n- [`react-native-row`](https://github.com/hyrwork/react-native-row/pull/13) for getting me started\n- [Bootstrap v4](https://getbootstrap.com/docs/4.0/utilities/spacing/) for the \"Size index\" idea\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feightyfive%2Freact-native-spacesheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feightyfive%2Freact-native-spacesheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feightyfive%2Freact-native-spacesheet/lists"}