![Malicious npm Package Typosquats react-login-page to Deploy Keylogger](https://cdn.sanity.io/images/cgdhsj6q/production/007b21d9cf9e03ae0bb3f577d1bd59b9d715645a-1024x1024.webp?w=400&fit=max&auto=format)
Research
Security News
Malicious npm Package Typosquats react-login-page to Deploy Keylogger
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
styled-breakpoints
Advanced tools
Changelog
Readme
Inside components.
const Box = styled.div`
background-color: pink;
${({ theme }) => theme.breakpoints.up('sm')} {
background-color: hotpink;
}
${({ theme }) => theme.breakpoints.up('md')} {
background-color: red;
}
`;
Outside components.
import { useTheme } from 'styled-components'; // or '@emotion/react'
const Layout = () => {
const { breakpoints } = useTheme();
const isMd = useMediaQuery(breakpoints.up('md'));
return <>{isMd && <Box />}</>;
};
From smallest to largest
From largest to smallest
π© getting started
Breakpoints act as the fundamental elements of responsive design. They enable you to control when your layout can adapt to a specific viewport or device size.
Utilize media queries to structure your CSS based on breakpoints. Media queries are CSS features that allow you to selectively apply styles depending on a defined set of browser and operating system parameters. The most commonly used media query property is min-width
.
The objective is mobile-first, responsive design. Styled Breakpoints aims to apply the essential styles required for a layout to function at the smallest breakpoint. Additional styles are then added to adjust the design for larger devices. This approach optimizes your CSS, enhances rendering speed, and delivers an excellent user experience.
npm install styled-breakpoints@latest
# or
yarn add styled-breakpoints@latest
Styled Breakpoints includes six default breakpoints, often referred to as grid tiers, for building responsive designs. These breakpoints can be customized.
const breakpoints = {
xs: '0px',
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px',
xxl: '1400px',
};
Each breakpoint has been carefully selected to accommodate containers with widths that are multiples of 12. The breakpoints also represent a subset of common device sizes and viewport dimensions, although they do not specifically target every use case or device. Instead, they provide a robust and consistent foundation for building designs that cater to nearly any device.
theme/config.ts
import { createStyledBreakpointsTheme } from 'styled-breakpoints';
export const theme = createStyledBreakpointsTheme();
theme/config.ts
import { createStyledBreakpointsTheme } from 'styled-breakpoints';
export const theme = createStyledBreakpointsTheme({
breakpoints: {
small: '100px',
medium: '200px',
large: '300px',
xLarge: '400px',
xxLarge: '500px',
},
});
theme/config.ts
import { createStyledBreakpointsTheme } from 'styled-breakpoints';
export const primaryTheme = {
fonts: ['sans-serif', 'Roboto'],
fontSizes: {
small: '1em',
medium: '2em',
large: '3em',
},
} as const;
export const theme = {
...primaryTheme,
...createStyledBreakpointsTheme(),
};
npm install styled-components
# or
yarn add styled-components
theme/styled.d.ts
import 'styled-components';
import { theme } from './theme/config';
type MyTheme = typeof theme;
declare module 'styled-components' {
export interface DefaultTheme extends MyTheme {}
}
npm install @emotion/{styled,react}
# or
yarn add @emotion/{styled,react}
theme/emotion.d.ts
import '@emotion/react';
import { theme } from './theme/config';
type MyTheme = typeof theme;
declare module '@emotion/react' {
export interface Theme extends MyTheme {}
}
app.tsx
import styled { ThemeProvider } from 'styled-components'; // or '@emotion/react'
import { theme } from './theme/config';
const Box = styled.div`
display: none;
${({ theme }) => theme.breakpoints.up('sm')} {
display: block;
}
`;
const App = () => (
<ThemeProvider theme={theme}>
<Box>π₯³</Box>
</ThemeProvider>
);
π Caching is implemented in all functions to optimize performance.
up
declare function up(
min: T,
orientation?: 'portrait' | 'landscape'
) => string
const Box = styled.div`
display: none;
${({ theme }) => theme.breakpoints.up('sm')} {
display: block;
}
`;
@media (min-width: 768px) {
display: block;
}
down
We occasionally use media queries that go in the other direction (the given screen size or smaller):
declare function down(
max: string,
orientation?: 'portrait' | 'landscape'
) => string
const Box = styled.div`
display: block;
${({ theme }) => theme.breakpoints.down('md')} {
display: none;
}
`;
@media (max-width: 767.98px) {
display: none;
}
Why subtract .02px? Browsers donβt currently support range context queries, so we work around the limitations of min- and max- prefixes and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.
only
There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.
declare function only(
name: string,
orientation?: 'portrait' | 'landscape'
) => string
const Box = styled.div`
background-color: pink;
${({ theme }) => theme.breakpoints.only('md')} {
background-color: rebeccapurple;
}
`;
@media (min-width: 768px) and (max-width: 991.98px) {
background-color: rebeccapurple;
}
between
Similarly, media queries may span multiple breakpoint widths.
declare function between(
min: string,
max: string,
orientation?: 'portrait' | 'landscape'
) => string
const Box = styled.div`
background-color: gold;
${({ theme }) => theme.breakpoints.between('md', 'xl')} {
background-color: rebeccapurple;
}
`;
@media (min-width: 768px) and (max-width: 1199.98px) {
background-color: rebeccapurple;
}
useMediaQuery
hookfeatures:
declare function useMediaQuery(query: string) => boolean
import { useTheme } from 'styled-components'; // or from '@emotion/react'
import { useMediaQuery } from 'styled-breakpoints/use-media-query';
import { Box } from 'third-party-library';
const SomeComponent = () => {
const { breakpoints } = useTheme();
const isMd = useMediaQuery(breakpoints.only('md'));
return <AnotherComponent>{isMd && <Box />}</AnotherComponent>;
};
MIT License
Copyright (c) 2018-2019 Maxim Alyoshin.
This project is licensed under the MIT License - see the LICENSE file for details.
FAQs
Unknown package
The npm package styled-breakpoints receives a total of 8,786 weekly downloads. As such, styled-breakpoints popularity was classified as popular.
We found that styled-breakpoints demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 1 open source maintainer 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.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.