0.5.4 • Published 3 years ago
swiss-react v0.5.4
swiss-react
A simple CSS-in-js solution made for a Typescript world 💙
Separating components from styles again 🎂
Installation
npm i swiss-react
Demo
I've made a Codesandbox to play around with
Simple Example
First create a stylesheet
// App.styles.ts
import { createStyles } from 'swiss-react';
export default createStyles('App', () => ({
Wrapper: {
display: 'flex'
}
}));
Then use it in your component
import React from 'react';
import AppStyles from './App.styles.ts';
import { useClassNames } from 'swiss-react';
function App() {
const c = useClassNames(styles);
return <div className={c.Wrapper()}>Hi</div>;
}
Advanced Example
// App.styles.ts
import { createStyles, condition } from 'swiss-react';
export default createStyles('App', () => ({
Wrapper: {
display: 'flex'
}
}));
Then use it in your component
import React from 'react';
import AppStyles from './App.styles.ts';
import { useClassNames } from 'swiss-react';
function App() {
const c = useClassNames(styles);
return <div className={c.Wrapper()}>Hi</div>;
}
0.5.4
3 years ago
0.5.3
3 years ago
0.5.2
4 years ago
0.5.1
4 years ago
0.5.0
4 years ago
0.4.15
5 years ago
0.4.14
5 years ago
0.4.13
5 years ago
0.4.12
5 years ago
0.4.11
5 years ago
0.4.10
5 years ago
0.4.9
5 years ago
0.4.8
5 years ago
0.4.7
5 years ago
0.4.6
5 years ago
0.4.5
5 years ago
0.4.4
5 years ago
0.4.3
5 years ago
0.4.2
5 years ago
0.4.1
5 years ago
0.4.0
5 years ago
0.3.4
6 years ago
0.3.3
6 years ago
0.3.2
6 years ago
0.3.1
6 years ago
0.3.0
6 years ago
0.2.29
6 years ago
0.2.28
6 years ago
0.2.27
6 years ago
0.2.26
6 years ago
0.2.25
6 years ago
0.2.24
6 years ago
0.2.23
6 years ago