Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
@automattic/viewport
Advanced tools
This package contains functions to identify and track changes to the viewport. This can be used for displaying different components depending on a desktop or mobile view.
For React helpers, please check the @automattic/viewport-react
package.
Simple usage:
import { isDesktop, isMobile } from '@automattic/viewport';
if ( isDesktop() ) {
// Render a component optimized for desktop view
} else if ( isMobile() ) {
// Render a component optimized for mobile view
}
Using one of the other breakpoints:
import { isWithinBreakpoint } from '@automattic/viewport';
if ( isWithinBreakpoint( '>1400px' ) ) {
// Render a component optimized for a very large screen
} else {
// Render alternative component
}
Registering to listen to changes, using vanilla methods:
import { subscribeIsDesktop } from '@automattic/viewport';
class MyComponent extends React.Component {
sizeChanged = ( matches ) => {
console.log( `Screen changed to ${ matches ? 'desktop' : 'non-desktop' } size` );
this.forceUpdate();
};
componentDidMount() {
this.unsubscribe = subscribeIsDesktop( this.sizeChanged );
}
componentWillUnmount() {
this.unsubscribe();
}
}
Note: the above usage is more easily accomplished using the hooks and higher-order components in @automattic/viewport-react
.
isWithinBreakpoint( breakpoint )
: Whether the current screen size matches the breakpoint.isMobile()
: Whether the current screen size matches a mobile breakpoint (equivalent to "<480px"). See note at end of document.isDesktop()
: Whether the current screen size matches a desktop breakpoint (equivalent to ">960px"). See note at end of document.subscribeIsWithinBreakpoint( breakpoint, listener )
: Register a listener for size changes that affect the breakpoint. Returns the unsubscribe function.subscribeIsMobile( listener )
: Register a listener for size changes that affect the mobile breakpoint (equivalent to "<480px"). Returns the unsubscribe function. See note at end of document.subscribeIsDesktop( listener )
: Register a listener for size changes that affect the desktop breakpoint (equivalent to ">960px"). Returns the unsubscribe function. See note at end of document.getWindowInnerWidth()
: Get the inner width for the browser window. Warning: This method triggers a layout recalc, potentially resulting in performance issues. Please use a breakpoint instead wherever possible.Note: As implemented in Calypso media query mixins, minimums are exclusive, while maximums are inclusive. i.e.:
@media (min-width: 481px)
@media (max-width: 960px)
@media (max-width: 960px) and (min-width: 481px)
FAQs
Vanilla helpers for tracking viewport changes.
We found that @automattic/viewport demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 37 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
Security News
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.