{"id":15390176,"url":"https://github.com/gajus/react-aux","last_synced_at":"2025-04-04T19:07:29.012Z","repository":{"id":63321144,"uuid":"99502709","full_name":"gajus/react-aux","owner":"gajus","description":"A self-eradicating component for rendering multiple elements.","archived":false,"fork":false,"pushed_at":"2017-11-29T09:45:30.000Z","size":13,"stargazers_count":326,"open_issues_count":2,"forks_count":19,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T18:07:51.608Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gajus.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}},"created_at":"2017-08-06T17:33:07.000Z","updated_at":"2025-02-11T15:49:34.000Z","dependencies_parsed_at":"2022-11-16T23:15:43.566Z","dependency_job_id":null,"html_url":"https://github.com/gajus/react-aux","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Freact-aux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Freact-aux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Freact-aux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gajus%2Freact-aux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gajus","download_url":"https://codeload.github.com/gajus/react-aux/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247234921,"owners_count":20905854,"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"],"created_at":"2024-10-01T15:04:44.834Z","updated_at":"2025-04-04T19:07:28.985Z","avatar_url":"https://github.com/gajus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-aux\n\n[![NPM version](http://img.shields.io/npm/v/react-aux.svg?style=flat-square)](https://www.npmjs.org/package/react-aux)\n[![Twitter Follow](https://img.shields.io/twitter/follow/kuizinas.svg?style=social\u0026label=Follow)](https://twitter.com/kuizinas)\n\nA self-eradicating component for rendering multiple elements.\n\n## If you are using React 16.2 or higher\n\nReact 16.2 [includes support for a new `React.Fragment` API](https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html) which works very similar to this library. If you don't know which one to pick, we recommend the version provided by React. This library mostly exists for those who can't upgrade to React 16.2 yet.\n\n## Motivation\n\nPrior to React v16, returning multiple elements from a component required to wrap them in an auxiliary element, e.g.\n\n```js\nconst Root = () =\u003e {\n  return \u003cdiv\u003e\n    \u003cp\u003eHello, World!\u003c/p\u003e\n    \u003cp\u003eI am a demo for react-aux.\u003c/p\u003e\n  \u003c/div\u003e;\n};\n\n```\n\nThe latter produces the following DOM:\n\n```html\n\u003cdiv\u003e\n  \u003cp\u003eHello, World!\u003c/p\u003e\n  \u003cp\u003eI am a demo for react-aux.\u003c/p\u003e\n\u003c/div\u003e\n\n```\n\nStarting with React v16, a single component can return multiple components without a wrapping element, e.g.\n\n```js\nconst Aux = (props) =\u003e {\n  return props.children;\n};\n\nconst Root = () =\u003e {\n  return \u003cAux\u003e\n    \u003cp\u003eHello, World!\u003c/p\u003e\n    \u003cp\u003eI am a demo for react-aux.\u003c/p\u003e\n  \u003c/Aux\u003e;\n};\n\n```\n\nThe latter produces paragraph elements without the wrapping node:\n\n```html\n\u003cp\u003eHello, World!\u003c/p\u003e\n\u003cp\u003eI am a demo for react-aux.\u003c/p\u003e\n\n```\n\nAs you can see, `react-aux` is literally just 3 lines of code. Therefore, you could implement it in your own codebase without using `react-aux`. However, `props =\u003e props.children` on its own does not explain the intent. `react-aux` as an abstraction serves the purpose of enabling a self-documenting code, i.e. the next time you see someone doing:\n\n```js\nimport Aux from 'react-aux';\n\nconst Root = () =\u003e {\n  return \u003cAux\u003e\n    \u003cp\u003eHello, World!\u003c/p\u003e\n    \u003cp\u003eI am a demo for react-aux.\u003c/p\u003e\n  \u003c/Aux\u003e;\n};\n\n```\n\nYou will know exactly what is the intent of the code.\n\n## Related articles\n\n* [Using React v16 to create self-destructing components](https://medium.com/@gajus/using-react-v16-to-create-self-destructing-components-de8e4eb61d0f)\n\n## FAQ\n\n### Whats the difference from using an array?\n\nYou can use an array if you assign each `React$Element` a pseudo-property `key` with a unique value, e.g. \n\n```js\nimport Aux from 'react-aux';\n\nconst Root = () =\u003e {\n  return [\n    \u003cp key='p1'\u003eHello, World!\u003c/p\u003e,\n    \u003cp key='p2'\u003eI am a demo for react-aux.\u003c/p\u003e\n  ];\n};\n\n```\n\nHowever, it requires manually ensuring key uniqueness and I am too [lazy](http://threevirtues.com/) for this.\n\n### Whats with the name?\n\n\"aux\" is a convention I've been using ever since I remember starting to write HTML/ CSS. Auxiliary element is something that does not have semantic purpose but exist for the purpose of grouping elements, styling, etc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Freact-aux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgajus%2Freact-aux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgajus%2Freact-aux/lists"}