{"id":22830868,"url":"https://github.com/mantoufan/yzhanreactresponsivecontent","last_synced_at":"2025-04-13T05:13:31.869Z","repository":{"id":266442070,"uuid":"860959779","full_name":"mantoufan/yzhanReactResponsiveContent","owner":"mantoufan","description":"A powerful and flexible React component for creating responsive content with automatic media query generation. 为响应式内容自动生成媒体查询","archived":false,"fork":false,"pushed_at":"2024-10-01T06:21:12.000Z","size":77,"stargazers_count":72,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T05:13:20.990Z","etag":null,"topics":["media-queries","nextjs","responsive","seo","ssr","yzhan1kb"],"latest_commit_sha":null,"homepage":"https://mantoufan.github.io/yzhanReactResponsiveContent/","language":"TypeScript","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/mantoufan.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":"2024-09-21T16:13:43.000Z","updated_at":"2025-01-03T21:49:15.000Z","dependencies_parsed_at":"2024-12-04T09:43:07.532Z","dependency_job_id":"1eb7f51d-c790-42a4-9309-2010632d220a","html_url":"https://github.com/mantoufan/yzhanReactResponsiveContent","commit_stats":null,"previous_names":["mantoufan/yzhanreactresponsivecontent"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FyzhanReactResponsiveContent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FyzhanReactResponsiveContent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FyzhanReactResponsiveContent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mantoufan%2FyzhanReactResponsiveContent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mantoufan","download_url":"https://codeload.github.com/mantoufan/yzhanReactResponsiveContent/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248665746,"owners_count":21142123,"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":["media-queries","nextjs","responsive","seo","ssr","yzhan1kb"],"created_at":"2024-12-12T20:15:46.801Z","updated_at":"2025-04-13T05:13:31.834Z","avatar_url":"https://github.com/mantoufan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# yzhan-react-responsive-content\n\n![npm](https://img.shields.io/npm/v/yzhan-react-responsive-content)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/yzhan-react-responsive-content)\n![npm](https://img.shields.io/npm/dt/yzhan-react-responsive-content)\n[![GitHub license](https://img.shields.io/github/license/mantoufan/yzhanReactResponsiveContent)](https://github.com/mantoufan/yzhanReactResponsiveContent/blob/main/LICENSE)\n![ie10+](https://img.shields.io/badge/IE-10-skyblue)\n\nA powerful and flexible React component for creating responsive content with automatic media query generation.  \n为响应式内容自动生成媒体查询.\n\n# Why you need it instead of conditional rendering\n\n- SSR / SSG / ISG: Conditional rendering requires device width, unavailable on the server\n- SEO: Conditionally rendered content may be missed by crawlers\n\n# Demo\n\n![GIF animation](https://s2.loli.net/2024/09/30/8PDlowU1MjFe7gc.gif)  \n[Demo Link](https://mantoufan.github.io/yzhanReactResponsiveContent/)\n\n## Features\n\n- **Server-side rendering**: Works out of the box with SSR, no client-side rendering required.\n- **Flexible content definition**: Accept a `set` prop similar to `srcSet`, allowing you to define content for different breakpoints easily.\n- **Versatile content types**: Supports various content types including strings, HTML tags, React components, null values, and even lists of React nodes.\n- **Performance optimized**: Uses pure CSS for control, automatically generating and removing media queries without global CSS pollution.\n- **Customizable display property**: Set the display property to match your layout needs (block, flex, grid, inline, inline-block, etc.).\n- **SEO-friendly**: Allows web crawlers to index content for both desktop and mobile versions simultaneously.\n- **Smart wrapper handling**: Reuses existing wrapper layers when present, avoiding unnecessary DOM nesting and preserving existing style selectors.\n\n## Installation\n\nInstall the package using npm:\n\n```bash\nnpm install yzhan-react-responsive-content\n```\n\nOr using yarn:\n\n```bash\nyarn add yzhan-react-responsive-content\n```\n\n## Usage\n\nHere's a basic example of how to use the `ResponsiveContent` component:\n\n```jsx\nimport ResponsiveContent from \"yzhan-react-responsive-content\";\n\nfunction MyComponent() {\n  return (\n    \u003cResponsiveContent\n      set={[\n        [\"Mobile Content\", 320],\n        [\"Tablet Content\", 768],\n        [\"Desktop Content\"],\n      ]}\n      display=\"block\"\n    /\u003e\n  );\n}\n```\n\nIn this example:\n\n- Content will display as follows:\n  - 'Mobile Content' for screen widths up to 320px\n  - 'Tablet Content' for screen widths between 321px and 768px\n  - 'Desktop Content' for screen widths above 768px\n\n### Advanced Usage\n\nYou can use more complex content types, including React components. When using React components or elements, remember to provide a unique `key` prop to each one:\n\n```jsx\nimport ResponsiveContent from \"yzhan-react-responsive-content\";\n\nfunction MyComponent() {\n  return (\n    \u003cResponsiveContent\n      set={[\n        [\n          \u003cMobileLayout key=\"mobile\"\u003eMobile specific content\u003c/MobileLayout\u003e,\n          320,\n        ],\n        [\u003cTabletLayout key=\"tablet\"\u003eTablet optimized view\u003c/TabletLayout\u003e, 768],\n        [\n          \u003cReact.Fragment key=\"desktop\"\u003e\n            \u003cDesktopHeader /\u003e\n            \u003cDesktopContent /\u003e\n            \u003cDesktopFooter /\u003e\n          \u003c/React.Fragment\u003e,\n        ],\n      ]}\n      display=\"flex\"\n    /\u003e\n  );\n}\n```\n\nNote: When using React components or elements in the `set` prop, always provide a unique `key` prop to each one. This helps React efficiently update and re-render the content.\n\n## API\n\n### Props\n\n- `set: Array\u003c[ReactNode | null, number?]\u003e`: An array of tuples. Each tuple contains the content to display and an optional breakpoint width. When using React components or elements as content, remember to provide a unique `key` prop to each one.\n- `display?: 'block' | 'flex' | 'grid' | 'inline' | 'inline-block'`: The CSS display property to use for the content. Defaults to 'block'.\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantoufan%2Fyzhanreactresponsivecontent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmantoufan%2Fyzhanreactresponsivecontent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmantoufan%2Fyzhanreactresponsivecontent/lists"}