zheeeng / react-device-frameset Goto Github PK

View Code? Open in Web Editor NEW

63.0 3.0 9.0 1.06 MB

React device frameset component

Home Page: https://react-device-frameset.zheeeng.me

License: MIT License

HTML 0.88% TypeScript 91.93% JavaScript 3.91% MDX 3.29%

frameset simulator emulator device ios android phone tablet pc mac

react-device-frameset's People

Contributors

Stargazers

Watchers

Forkers

cyclic-components airknifel shierli chancedai udbmnm appsessive trystatic belendia ngoyal100894

react-device-frameset's Issues

Vercel deployment build failed

When i use the package in my react app created with vite, when i try to build the app in vercel it failed, when i comment the section that i use this package in, it build and everything is fine

New iPhone models

Great library, thank you!
Will you also add the latest iPhone models in the near future?

Having an error with loading css of this lib in Next

Tried differently, but no luck. I am sure it`s possible to solve, any ideas ?

P.S this is how I used it in the component

Unclear how to scale size of device frames

I have tried using the width/height props but setting these to any numerical values produces inconsistent scaling, some of the frame scales while other parts do not.

As a workaround I was able to resize the entire frame properly using transform: scale() CSS on the outer wrapper div, but this obviously will leave empty space as transform doesn't cause the layout to reflow.

Any hint how I'm supposed to properly resize with props?

Can't import anything from library

First time trying to use the library, when I do import { DeviceFrameset } from 'react-device-frameset';
I get this error on terminal

./node_modules/react-device-frameset/dist/index.mjs
Can't import the named export 'jsx' from non EcmaScript module (only default export is available)

Documentation on npmjs.com is out of date.

Just a heads up that the NPM documentation for react-device-frameset is out of date.

On that site, it says to use the following import for the CSS:

import 'react-device-frameset/dist/styles/marvel-devices.min.css'

However, the Github documentation notes a different (and correct) import of:

import 'react-device-frameset/styles/marvel-devices.min.css';

the wrong import path in the README.md

Now: "import 'react-device-frameset/styles/xxx'"
It should be "import 'react-device-frameset/styles/xxx'"

how can i scale the device

the iphone x device is getting out of container , and i want to scall it down. HOW CAN I DO THAT?

i try to use it but got an errors

ERROR in ../node_modules/react-device-frameset/dist/index.mjs 210:29-40
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 221:28-39
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 230:34-45
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 289:29-41
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 296:33-45
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 306:34-46
Can't import the named export 'useCallback' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 225:2-11
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 319:2-12
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 414:2-12
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 432:2-12
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 146:16-23
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 207:22-30
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 209:29-37
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 218:50-58
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 219:21-29
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 229:29-37
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 235:30-38
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 283:22-30
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 285:29-37
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 302:50-58
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 303:21-29
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 305:29-37
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 311:30-38
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 404:16-24
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 409:20-28
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 410:22-30
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 411:25-33
Can't import the named export 'useMemo' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 208:38-46
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 217:34-42
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 220:44-52
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 228:40-48
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 284:38-47
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 295:42-51
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 304:40-49
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 400:37-46
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 401:55-64
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 402:36-45
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 403:44-53
Can't import the named export 'useState' from non EcmaScript module (only default export is available)
ERROR in ../node_modules/react-device-frameset/dist/index.mjs 408:39-48
Can't import the named export 'useState' from non EcmaScript module (only default export is available)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.