@react-jopau/styles 👋

> Common styles and themes for React projects

Install

``shell


yarn

yarn install @react-jopau/styles

npm

npm install @react-jopau/styles
`

Usage

$3

Function to create a breakpoints helper from rules.

`tsx
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
`

$3

Class to create a theme with the default configuration.

`tsx
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.

`tsx
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 = () => Click me;
``

Author

- Github: @joel3112