{"id":26926627,"url":"https://github.com/skyfi/react-mobile-image-viewer","last_synced_at":"2025-06-13T19:05:27.070Z","repository":{"id":35007797,"uuid":"195947446","full_name":"skyFi/react-mobile-image-viewer","owner":"skyFi","description":"🚀 React Image Viewer for mobile phone, just like wechat image preview.","archived":false,"fork":false,"pushed_at":"2023-01-04T04:00:07.000Z","size":17664,"stargazers_count":28,"open_issues_count":31,"forks_count":3,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-13T19:04:53.319Z","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/skyFi.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":"2019-07-09T06:35:17.000Z","updated_at":"2025-02-25T02:13:31.000Z","dependencies_parsed_at":"2023-01-15T12:00:39.285Z","dependency_job_id":null,"html_url":"https://github.com/skyFi/react-mobile-image-viewer","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/skyFi/react-mobile-image-viewer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyFi%2Freact-mobile-image-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyFi%2Freact-mobile-image-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyFi%2Freact-mobile-image-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyFi%2Freact-mobile-image-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skyFi","download_url":"https://codeload.github.com/skyFi/react-mobile-image-viewer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skyFi%2Freact-mobile-image-viewer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259704410,"owners_count":22898858,"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":"2025-04-02T03:34:45.035Z","updated_at":"2025-06-13T19:05:27.039Z","avatar_url":"https://github.com/skyFi.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-mobile-image-viewer\n\n## 体验\n\n```bash\ngit clone https://github.com/skyFi/react-mobile-image-viewer.git\ncd react-mobile-image-viewer\nyarn \u0026\u0026 npm start\n```\n\n1. 本地手机预览需要在同一个局域网下面访问`\u003c本地电脑ip\u003e:3000`\n2. 在线预览： [https://skyfi.github.io/react-mobile-image-viewer/](https://skyfi.github.io/react-mobile-image-viewer/)\n\n![](https://github.com/skyFi/react-mobile-image-viewer/raw/master/react-mobile-image-viewer__qrcode.png)\n\n## 安装\n\n```bash\nnpm install react-mobile-image-viewer --save\n```\n\n## 使用\n\n### 做函数使用（`推荐`）\n\n基本规则： `viewer(\u003c配置信息（[如下](#配置)）\u003e: Object) =\u003e ({ destroy: Function })`;\n\n```javascript\n// import\nimport viewer from 'react-mobile-image-viewer';\nimport 'react-mobile-image-viewer/lib/index.css';\n\n// show viewer\nthis.v = viewer({\n  urls: ['... image url', '... image url']\n});\n\n// cancel view\nthis.v \u0026\u0026 this.v.destroy();\n```\n\n### 做节点使用\n\n```javascript\n// import\nimport { ImageViewer } from 'react-mobile-image-viewer';\nimport 'react-mobile-image-viewer/lib/index.css';\n\n// show viewer\n\u003cImageViewer urls={['... image url', '... image url']} /\u003e;\n```\n\n## 配置\n\n| 属性           | 类型                                                     | 描述                                                                                    | 默认值                |\n| -------------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------- |\n| urls           | `string[]`                                               | 需要预览的图片链接列表                                                                  | `[]`                  |\n| index          | `number`                                                 | 当前显示图片的位置索引，从 `0` 开始                                                     | `0`                   |\n| footer         | `ReactNode/({ currentIndex: number }) =\u003e ReactNode/null` | 自定义底部节点                                                                          | `undefined`           |\n| onClose        | `() =\u003e void`                                             | 关闭组件回调                                                                            | `() =\u003e {}`            |\n| onChange       | `({ currentIndex: number }) =\u003e void`                     | 换页操作回调                                                                            | `() =\u003e {}`            |\n| getContainer   | `() =\u003e DOM element`                                      | 自定义容器                                                                              | `() =\u003e document.body` |\n| maxZoomNum     | `number`                                                 | 最大放大倍数                                                                            | `8`                   |\n| zIndex         | `number`                                                 | 组件图层深度                                                                            | `100`                 |\n| screenWidth    | `number`                                                 | 屏幕宽 `document.documentElement.clientWidth`                                           | `undefined`           |\n| screenHeight   | `number`                                                 | 屏幕高 `document.documentElement.clientHeight`                                          | `undefined`           |\n| speed          | `number`                                                 | 滑动的时长(in `ms`)                                                                     | `300`                 |\n| gap            | `number`                                                 | 间隙(in `px`)                                                                           | `10`                  |\n| debug          | `boolean`                                                | 是否打印开发日志，默认关闭                                                              | `false`               |\n| strict         | `boolean`                                                | 严格操作模式，开启将禁止 safari 的橡皮筋效果，默认开启                                  | `true`                |\n| doubleTap      | `boolean`                                                | 是否开启双击放大效果，开启后会导致单击取消有个 `250ms` 的延时（作为双击判断），默认开启 | `true`                |\n| containerClass | `string`                                                 | 容器自定义样式类                                                                        | `''`                  |\n| maskClass      | `string`                                                 | 遮罩自定义样式类                                                                        | `''`                  |\n| footerClass    | `string`                                                 | 底部自定义样式类                                                                        | `''`                  |\n\n## 协议\n\nMIT License\n\nCopyright (c) 2018 Skylor.Min\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyfi%2Freact-mobile-image-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskyfi%2Freact-mobile-image-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyfi%2Freact-mobile-image-viewer/lists"}