0.23.1 • Published 9 months ago
@react-jopau/styles v0.23.1
Common styles and themes for React projects
Install
# yarn
yarn install @react-jopau/styles
# npm
npm install @react-jopau/styles
Usage
createBreakpoints
Function to create a breakpoints helper from rules.
import { createBreakpoints } from '@react-jopau/styles';
const rules = {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920
};
const config = createBreakpoints(rules);
// Custom theme key
console.log(config.current); // 'xs' | 'sm' | 'md' | 'lg' | 'xl'
// Check if current theme is down to 'sm'
console.log(config.down('sm')); // true | false
// Check if current theme is up to 'sm'
console.log(config.up('sm')); // true | false
// Check if current theme is between 'sm' and 'xl'
console.log(config.between('sm', 'xl')); // true | false
ThemeBuilder
Class to create a theme with the default
configuration.
import { ThemeBuilder } from '@react-jopau/styles';
const builder = new ThemeBuilder();
builder.createTheme();
You can create a theme passing a custom configuration, it's will be merged with the default
configuration.
import { ThemeBuilder } from '@react-jopau';
const builder = new ThemeBuilder();
builder.createTheme({
theme: {
colors: {
primary: '#20232a',
secondary: '#04cffa',
text: '#000',
background: '#fcfcfc'
},
shadows: {
button: '0 0 10px 0 rgba(0, 0, 0, 0.2)'
}
},
darkTheme: {
colors: {
primary: '#20232a',
secondary: '#04cffa',
text: '#fff',
background: '#1d1f20'
},
shadows: {
button: '0 0 10px 0 rgba(255, 255, 255, 0.2)'
}
},
media: {
xs: 650,
sm: 960,
md: 1280,
lg: 1400,
xl: 1920
}
});
// Breakpoints rules
console.log(builder.breakpoints);
// Current theme config merged with the default
console.log(builder.currentConfig);
// Styled your components
const ButtonStyled = builder.styledTheme('button', {
boder: '1px solid #000',
height: 58
});
const Button = () => <ButtonStyled>Click me</ButtonStyled>;
Author
- Github: @joel3112
0.23.1
9 months ago
0.22.0
1 year ago
0.21.0
1 year ago
0.20.1
1 year ago
0.20.0
1 year ago
0.19.0
1 year ago
0.18.1
1 year ago
0.18.0
1 year ago
0.17.1
1 year ago
0.17.0
1 year ago
0.16.0
1 year ago
0.15.0
1 year ago
0.14.0
2 years ago
0.13.1
2 years ago
0.13.0
2 years ago
0.12.0
2 years ago
0.11.0
2 years ago
0.10.1
2 years ago
0.10.0
2 years ago
0.9.3
2 years ago
0.9.2
2 years ago
0.9.1
2 years ago
0.9.0
2 years ago
0.8.0
2 years ago
0.7.1
2 years ago
0.7.0
2 years ago
0.6.0
2 years ago