{"id":19904415,"url":"https://github.com/alloc/react-primal","last_synced_at":"2025-05-03T00:31:38.753Z","repository":{"id":107078754,"uuid":"225086764","full_name":"alloc/react-primal","owner":"alloc","description":"Extensible primitives for React Native","archived":true,"fork":false,"pushed_at":"2023-08-03T06:38:25.000Z","size":389,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T21:02:30.996Z","etag":null,"topics":["react","react-native","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/alloc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2019-12-01T00:21:39.000Z","updated_at":"2024-11-11T16:57:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"1ef0d5d3-3a04-4164-8389-5bc63d829a13","html_url":"https://github.com/alloc/react-primal","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Freact-primal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Freact-primal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Freact-primal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alloc%2Freact-primal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alloc","download_url":"https://codeload.github.com/alloc/react-primal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252126559,"owners_count":21698964,"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":["react","react-native","typescript"],"created_at":"2024-11-12T20:28:19.475Z","updated_at":"2025-05-03T00:31:38.745Z","avatar_url":"https://github.com/alloc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-primal\n\nExtensible `\u003cBox\u003e` primitive with inline style props\n\n**For React Native only**\n\n\u0026nbsp;\n\n## `\u003cBox\u003e`\n\nBy default, the `\u003cBox\u003e` component takes `\u003cView\u003e` props (eg: `style={{height: 0}}`)\nand `ViewStyle` props (eg: `height={0}`).\n\n```tsx\n\u003cBox\n  // \u003cView\u003e props\n  pointerEvents=\"none\"\n  style={{ width: 25 }}\n  // ViewStyle props\n  height={50}\n  backgroundColor=\"black\"\n/\u003e\n```\n\nThe `style` prop overrides any inline style props.\n\n\u0026nbsp;\n\n## `Box.extend`\n\nBind props to the `\u003cBox\u003e` component. Think of it like [currying](https://medium.com/@kbrainwave/currying-in-javascript-ce6da2d324fe) or sub-classing.\n\n```tsx\nconst Row = Box.extend({\n  flexDirection: 'row',\n})\n\n\u003cRow overflow=\"hidden\"\u003e\n  {children}\n\u003c/Row\u003e\n```\n\nWhen the first argument of `extend` is a function, you can transform the\nprops every time the returned component is used.\n\n```tsx\nconst Circle = Box.extend(props =\u003e ({\n  // Default background color\n  backgroundColor: 'black',\n  // User-provided props\n  ...props,\n  // Always ignore user-provided \"borderRadius\"\n  style: [props.style, { borderRadius: 9999 }],\n}))\n\n\u003cCircle width={100} height={100} /\u003e\n```\n\nThe `extend` function can be used on any masked component.\n\n```tsx\nconst BlueCircle = Circle.extend({\n  backgroundColor: 'blue',\n  color: 'white'\n})\n\n\u003cBlueCircle\u003e\n  Much wow\n\u003c/BlueCircle\u003e\n```\n\nThat's all folks!\n\n\u0026nbsp;\n\n## Prior art\n\n- [suchipi/react-boxxy](https://github.com/suchipi/react-boxxy)\n- [segmentio/ui-box](https://github.com/segmentio/ui-box)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloc%2Freact-primal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falloc%2Freact-primal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falloc%2Freact-primal/lists"}