{"id":22220533,"url":"https://github.com/drawbotics/if-only","last_synced_at":"2025-06-13T09:08:35.201Z","repository":{"id":74215122,"uuid":"92181885","full_name":"Drawbotics/if-only","owner":"Drawbotics","description":"A tiny react component that only renders children if a condition if met.","archived":false,"fork":false,"pushed_at":"2017-10-25T12:25:06.000Z","size":27,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-01T02:59:57.008Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/Drawbotics.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":"2017-05-23T14:22:54.000Z","updated_at":"2018-01-31T15:39:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"ddba91ab-999a-4ed0-a300-1c6446ec33b4","html_url":"https://github.com/Drawbotics/if-only","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Drawbotics/if-only","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fif-only","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fif-only/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fif-only/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fif-only/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Drawbotics","download_url":"https://codeload.github.com/Drawbotics/if-only/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Drawbotics%2Fif-only/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259616383,"owners_count":22884883,"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-12-02T23:09:00.315Z","updated_at":"2025-06-13T09:08:35.177Z","avatar_url":"https://github.com/Drawbotics.png","language":"JavaScript","readme":"# If-only\n\n A tiny react component that only renders children if a condition if met.\n\n\n## Installation\n\nInstall it using yarn:\n\n```bash\n$ yarn add if-only\n```\n\n\n## Usage\n\n\n### Simple usage\n\n```javascript\nconst Component = () =\u003e (\n  \u003cdiv\u003e\n    // ...\n    \u003cIf cond={someCondition}\u003e\n      // will render if someCondition is true\n    \u003c/If\u003e\n  \u003c/div\u003e\n);\n```\n\n\n### Advanced usage\n\nIf there's only one child, then it's going to render that child, but if there's more than one child, then, it's going to wrap them with an external component. That external component depends on the following props.\n\n\n#### Manually specifying the external component\n\nThis takes precedence over any other prop.\n\n```javascript\nconst Component = () =\u003e (\n  \u003cdiv\u003e\n    // ...\n    \u003cIf cond={someCondition} component={MyExternalComponent}\u003e\n      // will render if someCondition is true wrapping it with \u003cMyExternalComponent\u003e\n    \u003c/If\u003e\n  \u003c/div\u003e\n);\n```\n\n#### Using a default external component\n\nIf `inline` is specified, it will wrap the children with a `span` tag. Otherwise, it will just use a `div` tag.\n\n```javascript\nconst Component = () =\u003e (\n  \u003cdiv\u003e\n    // ...\n    \u003cIf cond={someCondition} inline\u003e\n      // Will render if someCondition is true wrapping it with a \u003cspan\u003e\n      \u003cdiv /\u003e\n      \u003cdiv /\u003e\n    \u003c/If\u003e\n  \u003c/div\u003e\n);\n```\n\n#### Specifying style and className for external component\n\nIf a external component is to be rendered, the `className` and `style` props can be specified on the `If` component and\nit will pass them down to the external component.\n\n```javascript\nconst Component = () =\u003e (\n  \u003cdiv\u003e\n    // ...\n    \u003cIf cond={someCondition} className=\"CustomName\"\u003e\n      // Will render if someCondition is true. External \u003cdiv\u003e will have className=\"CustomName\"\n    \u003c/If\u003e\n  \u003c/div\u003e\n);\n```\n\n\n## License\n\nMIT. See [LICENSE](LICENSE) for detail.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawbotics%2Fif-only","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdrawbotics%2Fif-only","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdrawbotics%2Fif-only/lists"}