{"id":13528300,"url":"https://github.com/Jesperpaulsen/sanity-mobile-preview","last_synced_at":"2025-04-01T11:31:20.806Z","repository":{"id":40613568,"uuid":"312221857","full_name":"Jesperpaulsen/sanity-mobile-preview","owner":"Jesperpaulsen","description":"An NPM package written in React used to preview mobile devices. Especially helpful when used in combination with a CMS like Sanity.","archived":false,"fork":false,"pushed_at":"2023-08-20T12:01:49.000Z","size":2816,"stargazers_count":28,"open_issues_count":3,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-27T12:22:10.558Z","etag":null,"topics":["cms","mobile-devices","react","sanity","sanity-studio"],"latest_commit_sha":null,"homepage":"https://jesperpaulsen.github.io/sanity-mobile-preview/","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/Jesperpaulsen.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}},"created_at":"2020-11-12T09:04:37.000Z","updated_at":"2024-03-06T09:24:45.000Z","dependencies_parsed_at":"2024-01-13T22:23:09.426Z","dependency_job_id":"2cfafe24-224f-4a14-a721-164a1f4e2f72","html_url":"https://github.com/Jesperpaulsen/sanity-mobile-preview","commit_stats":{"total_commits":20,"total_committers":2,"mean_commits":10.0,"dds":0.09999999999999998,"last_synced_commit":"e494ef2f9062e21dd4ca4e705cec252449a13e2b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jesperpaulsen%2Fsanity-mobile-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jesperpaulsen%2Fsanity-mobile-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jesperpaulsen%2Fsanity-mobile-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jesperpaulsen%2Fsanity-mobile-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jesperpaulsen","download_url":"https://codeload.github.com/Jesperpaulsen/sanity-mobile-preview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222721797,"owners_count":17028600,"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":["cms","mobile-devices","react","sanity","sanity-studio"],"created_at":"2024-08-01T06:02:24.377Z","updated_at":"2024-11-02T13:31:34.754Z","avatar_url":"https://github.com/Jesperpaulsen.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# sanity-mobile-preview\n\n\u003e An NPM package written in React used to preview mobile devices. Especially helpful when used in combination with a CMS like sanity.\n\n[![NPM](https://img.shields.io/npm/v/sanity-mobile-preview.svg)](https://www.npmjs.com/package/sanity-mobile-preview) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n[DEMO](https://jesperpaulsen.github.io/sanity-mobile-preview/)\n\n![Demo picture](https://github.com/Jesperpaulsen/sanity-mobile-preview/blob/master/docs/Preview-demo.png?raw=true)\n\n## Install\n\n```bash\nnpm install --save sanity-mobile-preview\n```\n\n## Usage\n\n```tsx\nimport SanityMobilePreview from 'sanity-mobile-preview'\nimport 'sanity-mobile-preview/dist/index.css?raw'\n\nconst Example = () =\u003e {\n  return \u003cSanityMobilePreview /\u003e\n}\n```\n\n### How to set up preview with Sanity\n\nIn order to set up mobile preview with Sanity, you first need to create a new view.\n\nFor simplicity, we will copy the predefined preview from [IframePreview.js](https://github.com/sanity-io/sanity-template-gatsby-blog/blob/master/template/studio/src/previews/IframePreview.js) to a file called `IframeMobilePreview.js`\n\nAdd imports:\n\n```jsx\nimport SanityMobilePreview from 'sanity-mobile-preview'\nimport 'sanity-mobile-preview/dist/index.css?raw'\n```\n\nAt line 47, replace\n\n```tsx\nreturn (\n  \u003cdiv className={styles.componentWrapper}\u003e\n    \u003cdiv className={styles.iframeContainer}\u003e\n      \u003ciframe src={url} frameBorder={'0'} /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n)\n```\n\nwith\n\n```tsx\nreturn (\n  \u003cdiv className={styles.componentWrapper}\u003e\n    \u003cSanityMobilePreview\u003e\n      \u003cdiv className={styles.iframeContainer}\u003e\n        \u003ciframe src={url} frameBorder={'0'} /\u003e\n      \u003c/div\u003e\n    \u003c/SanityMobilePreview\u003e\n  \u003c/div\u003e\n)\n```\n\nThen go to `deskStructure.js`.\n\nUnder `getDefaultDocumentNode` add the next snippet to the Schemes you want to add mobile preview to:\n\n```jsx\n    S.view\n        .component(IframeMobilePreview)\n        .title('Mobile preview')\n        .options({previewURL})\n    ])\n```\n\nYou should now be able to preview your website with a mobile view.\n\n## Customization\n\nThe SanityMobilePreview takes five optional arguments:\n\n| Argument             | Values                                                                                        | Default     |\n| -------------------- | --------------------------------------------------------------------------------------------- | ----------- |\n| allowedDevices       | An array of MobileDevices. This will be the devices that are selectable in the dropdown menu. | All devices |\n| preSelectedDevice    | A MobileDevice. The default device to be selected.                                            | 'iphone-x'  |\n| preSelectedColor     | A device color. The default device color to selected.                                         | 'black      |\n| showMenu             | A boolean. Controls the visibility of the dropdowns.                                          | true        |\n| preSelectedLandscape | A boolean. The default orientation of the devices                                             | false       |\n\nIf you have specified a preSelectedDevice that is not specified in allowedDevices, it will default to the first device in allowedDevices.\n\nIf you have specified a preSelectedColor that is not applicable to the preSelectedDevice, the preSelectedColor will default to black.\n\n#### Example\n\nThis example will load a silver iPad mini as default, and only allows iPhone X and iPad to be selected:\n\n```js\nconst App = () =\u003e {\n  return (\n    \u003cMobileDevicePreview\n      preSelectedDevice={'ipad'}\n      preSelectedColor={'silver'}\n      allowedDevices={['ipad', 'iphone-x']}\n    \u003e\n      \u003cdiv\u003e This is a demo 🤠\u003c/div\u003e\n    \u003c/MobileDevicePreview\u003e\n  )\n}\n```\n\n## Types\n\nMobileDevices = 'iphone-x'\n| 'note8'\n| 'iphone8'\n| 'iphone8plus'\n| 'iphone5s'\n| 'ipad'\n| 'nexus5'\n\nMobileDeviceColors = 'silver' | 'black' | 'gold'\n\n## Devices\n\nThe different devices are:\n\n| DeviceId    | Readable name | Colors              |\n| ----------- | ------------- | ------------------- |\n| iphone-x    | iPhone X      | black               |\n| note8       | Note 8        | black               |\n| iphone8     | iPhone 8      | black, silver, gold |\n| iphone8plus | iPhone 8 Plus | black, silver, gold |\n| iphone5s    | iPhone 5s     | black, silver, gold |\n| ipad        | iPad mini     | black, silver       |\n| nexus5      | Nexus 5       | black               |\n\n## Credit\n\n[Marvel Devices](https://github.com/marvelapp/devices.css/) \u003cbr\u003e\n[create-react-library](https://github.com/transitive-bullshit/create-react-library)\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJesperpaulsen%2Fsanity-mobile-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FJesperpaulsen%2Fsanity-mobile-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FJesperpaulsen%2Fsanity-mobile-preview/lists"}