Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@stitches/react
Advanced tools
@stitches/react is a CSS-in-JS library for React that allows developers to write CSS with JavaScript. It provides a powerful and flexible API for styling components, theming, and responsive design.
Styling Components
This feature allows you to create styled components using the `styled` function. You can define styles directly in your JavaScript code and apply them to your React components.
const { styled } = require('@stitches/react');
const Button = styled('button', {
backgroundColor: 'blue',
color: 'white',
padding: '10px 20px',
borderRadius: '5px',
'&:hover': {
backgroundColor: 'darkblue'
}
});
// Usage in a React component
// <Button>Click me</Button>
Theming
Theming allows you to define a set of design tokens (e.g., colors, fonts) that can be used throughout your application. This makes it easy to maintain a consistent design and update styles globally.
const { createStitches } = require('@stitches/react');
const { styled, theme } = createStitches({
theme: {
colors: {
primary: 'blue',
secondary: 'green'
}
}
});
const Button = styled('button', {
backgroundColor: '$primary',
color: 'white',
padding: '10px 20px',
borderRadius: '5px'
});
// Usage in a React component
// <Button>Click me</Button>
Responsive Design
This feature allows you to define responsive styles using media queries. You can specify different styles for different screen sizes, making it easy to create responsive designs.
const { styled } = require('@stitches/react');
const Box = styled('div', {
width: '100%',
padding: '20px',
backgroundColor: 'lightgray',
'@media (min-width: 600px)': {
backgroundColor: 'gray'
},
'@media (min-width: 900px)': {
backgroundColor: 'darkgray'
}
});
// Usage in a React component
// <Box>Responsive Box</Box>
styled-components is another popular CSS-in-JS library for React. It allows you to write actual CSS code to style your components. It offers similar functionality to @stitches/react, such as theming and responsive design, but with a different API and syntax.
Emotion is a performant and flexible CSS-in-JS library. It provides both a styled API and a css API for writing styles. Emotion is known for its high performance and flexibility, making it a strong alternative to @stitches/react.
twin.macro is a library that combines the benefits of Tailwind CSS with the power of CSS-in-JS. It allows you to use Tailwind's utility classes within styled-components or Emotion. This makes it a unique alternative to @stitches/react for those who prefer utility-first CSS.
@stitches/react is a react implementation of stitches, a CSS-in-JS library with a best-in-class developer experience.
# with npm
npm install @stitches/react
# with yarn
yarn add @stitches/react
<script type="module">
import { styled } from 'https://cdn.skypack.dev/@stitches/react'
</script>
<script src="https://unpkg.com/@stitches/react/dist/index.global.js"></script>
<script>
const { styled } = stitches
</script>
For full documentation, visit stitches.dev.
Please follow our contributing guidelines.
Licensed under the MIT License, Copyright © 2021-present Modulz.
See LICENSE for more information.
FAQs
The modern CSS-in-JS library
The npm package @stitches/react receives a total of 189,378 weekly downloads. As such, @stitches/react popularity was classified as popular.
We found that @stitches/react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 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
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.