Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
@automattic/viewport-react
Advanced tools
This package contains React helpers to identify and track changes to the viewport. This can be used for displaying different components depending on a desktop or mobile view.
For vanilla methods, please check the @automattic/viewport
package.
Using a hook:
import { useMobileBreakpoint } from '@automattic/viewport-react';
export default function MyComponent( props ) {
const isMobile = useMobileBreakpoint();
return <div>Screen size: { isMobile ? 'mobile' : 'not mobile' }</div>;
}
Using a higher-order component:
import { withMobileBreakpoint } from '@automattic/viewport-react';
class MyComponent extends React.Component {
render() {
const { isBreakpointActive: isMobile } = this.props;
return <div>Screen size: { isMobile ? 'mobile' : 'not mobile' }</div>;
}
}
export default withMobileBreakpoint( MyComponent );
useBreakpoint( breakpoint )
: Returns the current status for a breakpoint, and keeps it updated.useMobileBreakpoint()
: Returns the current status for the mobile breakpoint, and keeps it updated.useDesktopBreakpoint()
: Returns the current status for the desktop breakpoint, and keeps it updated.withBreakpoint( breakpoint )( WrappedComponent )
: Returns a wrapped component with the current status for a breakpoint as the isBreakpointActive
prop.withMobileBreakpoint( WrappedComponent )
: Returns a wrapped component with the current status for the mobile breakpoint as the isBreakpointActive
prop.withDesktopBreakpoint( WrappedComponent )
: Returns a wrapped component with the current status for the desktop breakpoint as the isBreakpointActive
prop.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
React helpers for tracking viewport changes
We found that @automattic/viewport-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 26 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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
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.