Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michal-wrzosek/next-styled-components
Styled-Components that are compatible with Next.js server components (RSC)
https://github.com/michal-wrzosek/next-styled-components
nextjs rsc styled-components
Last synced: 2 months ago
JSON representation
Styled-Components that are compatible with Next.js server components (RSC)
- Host: GitHub
- URL: https://github.com/michal-wrzosek/next-styled-components
- Owner: michal-wrzosek
- License: mit
- Created: 2024-08-29T16:03:56.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-03T13:30:28.000Z (4 months ago)
- Last Synced: 2024-09-28T14:42:55.678Z (3 months ago)
- Topics: nextjs, rsc, styled-components
- Language: TypeScript
- Homepage:
- Size: 2.24 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-styled-components
[](https://npmjs.com/package/next-styled-components)
**Styled-Components that are compatible with Next.js server components (RSC).**
The goal of this library is that you should be able to use it as the [original library](https://github.com/styled-components/styled-components) and it will work with not only client components but also new server ones (RSC).
This library covers most important parts of the original lib API:
- styled(Component)
- styled.element
- createGlobalStyle
- keyframes
- ``
- ``
There are still some things that have not yet been ported from the original lib. Also there are some things that work slightly differently or currently are hard to implement because of limitations of RSCs.
## How to install
```bash
npm i next-styled-components
```
## How to use it
The most important part is to surround all your styled components with ``. This component takes care of gathering all styles on the server and on the client and placing the css styles within HTML tree.
Example [`src/app/layout.tsx`](example-nextjs/src/app/layout.tsx):
```typescript
import type { Metadata } from 'next';
import { Inter } from 'next/font/google';
import { createGlobalStyle, StyleSheetManager, ThemeProvider } from 'next-styled-components';
const inter = Inter({ subsets: ['latin'] });
const GlobalStyle = createGlobalStyle`
html, body {
color: white;
background-color: black;
}
*, *::before, *::after {
box-sizing: border-box;
}
`;
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
{children}
);
}
```
Example [`src/app/page.tsx`](example-nextjs/src/app/page.tsx):
```typescript
import { css, keyframes, styled } from 'next-styled-components';
import { Client } from './client';
const textCss = css`
text-transform: capitalize;
text-decoration: underline;
font-style: italic;
`;
const fadeInOutAnimation = keyframes`
0% {
opacity: 0;
}
100% {
opacity: 1;
}
`;
const Secondary = styled.span.attrs<{ $isOn: boolean }>(() => ({ role: 'alert' }))`
display: block;
width: 100px;
height: 100px;
background-color: ${({ theme }) => theme.primaryColor};
animation: ${fadeInOutAnimation} 1s infinite alternate;
`;
const Main = styled.div<{ color: string }>`
width: 150px;
height: 150px;
padding: 10px;
background-color: ${({ color }) => color};
position: relative;
${textCss};
&:hover {
background-color: yellow;
}
& > ${Secondary} {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
`;
export default function Home() {
return (
<>
Server Component
>
);
}
```
And an example of some client component [`src/app/client.tsx`](example-nextjs/src/app/client.tsx):
```typescript
'use client';
import { styled } from 'next-styled-components';
import { useState } from 'react';
const StyledDiv = styled.div<{ $isOn: boolean }>`
width: 150px;
height: 150px;
padding: 10px;
background-color: ${({ $isOn }) => ($isOn ? 'pink' : 'green')};
`;
export const Client = () => {
const [isOn, setIsOnClick] = useState(false);
return (
setIsOnClick((prev) => !prev)}>
Client Component
);
};
```
And if you want to type your theme create a type file, for example [`src/next-styled-components.d.ts`](example-nextjs/src/next-styled-components.d.ts):
```typescript
import 'next-styled-components';
declare module 'next-styled-components' {
export interface DefaultTheme {
primaryColor: string;
}
}
```
## How does it work
As of September 2024, original Styled-Components library do not work with Next.js RSC due to the use of React Context which is not permitted. So this library is trying to use good old single global object to communicate between components. After some trials and errors I found a setup that seems to work just right. This library needs some more real world scenarios testing, so please report any issues you find.
For more details, just look into the [source code](src/styled.tsx)
## Final note
This library is still in an early development phase.
If you have some ideas how to improve the library, open an Issue or PR. Also, you can directly write to me:
[https://github.com/michal-wrzosek/](https://github.com/michal-wrzosek/)
---
This library was built using [react-component-lib](https://github.com/michal-wrzosek/react-component-lib)