{"id":28223215,"url":"https://github.com/jonlambert/react-propose","last_synced_at":"2026-04-25T21:32:12.933Z","repository":{"id":41834069,"uuid":"483676366","full_name":"jonlambert/react-propose","owner":"jonlambert","description":"⚙️ Collection of simple functions that help reduce JSX boilerplate when extending React components.","archived":false,"fork":false,"pushed_at":"2023-03-12T14:08:14.000Z","size":136,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-11T09:34:04.525Z","etag":null,"topics":["react","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/jonlambert.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}},"created_at":"2022-04-20T13:56:43.000Z","updated_at":"2022-09-07T11:43:22.000Z","dependencies_parsed_at":"2022-08-11T18:51:04.283Z","dependency_job_id":null,"html_url":"https://github.com/jonlambert/react-propose","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/jonlambert/react-propose","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonlambert%2Freact-propose","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonlambert%2Freact-propose/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonlambert%2Freact-propose/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonlambert%2Freact-propose/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonlambert","download_url":"https://codeload.github.com/jonlambert/react-propose/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonlambert%2Freact-propose/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32278249,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","typescript"],"created_at":"2025-05-18T07:14:58.778Z","updated_at":"2026-04-25T21:32:12.909Z","avatar_url":"https://github.com/jonlambert.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Propose / withDefaultProps\n\nProps, composed.\n\nThis package exposes a tiny [(\u003c1kb)](https://bundlephobia.com/package/react-propose), zero dependency helper function allowing you to compose props from a parent component. Promoting ease of composition - drill down layer by layer by refining each prop, with full TypeScript support.\n\n```tsx\nimport { withDefaultProps } from 'react-propose';\n```\n\n#### Given a base component\n\n```tsx\ninterface BaseMessageProps {\n  message: string;\n  title?: string;\n}\nconst BaseMessage: React.FC\u003cBaseMessageProps\u003e = ({ message, title }) =\u003e (\n  \u003cdiv\u003e\n    {title \u0026\u0026 \u003ch1\u003e{title}\u003c/h1\u003e}\n    \u003cp\u003e{message}\u003c/p\u003e\n  \u003c/div\u003e\n);\n```\n\n#### Before\n\n```tsx\ninterface FooBarMessageProps extends Omit\u003cBaseMessageProps, 'title'\u003e {}\nconst FooBarMessage: React.FC\u003cFooBarMessageProps\u003e = ({ message }) =\u003e (\n  \u003cBaseMessage title=\"Foo\" message={message} /\u003e\n);\n```\n\n#### With `react-propose`\n\n```tsx\nconst FooBarMessage = withDefaultProps(BaseMessage, { title: 'Foo' });\n```\n\n## With Chakra UI\n\n`styled-components` introduced a simple API to apply styles to a component. Use `withDefaultProps()` to achieve a similar DX, with full autocompletion and type safety:\n\n```ts\nimport { withDefaultProps } from 'react-propose';\nimport { Button } from '@chakra-ui/react';\n\nconst SimpleButton = withDefaultProps(Button, { p: 4, bg: 'green.400' });\nconst DestructiveButton = withDefaultProps(SimpleButton, { bg: 'red.400'});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonlambert%2Freact-propose","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonlambert%2Freact-propose","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonlambert%2Freact-propose/lists"}