@cronocode/react-box v2.0.3
React box
This is a react base component which will reduce considerably necessity to write css code.
Getting Started
- Installation
npm install @cronocode/react-box
- Use component
Sizes is equal to 1/4rem
padding={3}
means 1/4 * 3 => 0.75rem
In the example below is creating a box with maring: 0.5rem
and padding: 1.75rem
import Box from "@cronocode/react-box";
export default function Component(props: Props) {
return (
<Box className="custom-class" m={2} p={7}>
basic example
</Box>
);
}
NOTE: Root font-size
is set to 16px
Components
- Box - base component with a tons of props
import Box from "@cronocode/react-box";
Alias-shortcuts components
- Flex - this is a
Box
component withdisplay: flex
style
import Flex from "@cronocode/react-box/components/flex";
- Button - this is a
Box
component with html tagbutton
andonClick
prop
import Button from "@cronocode/react-box/components/button";
- Textbox - this is a
Box
component with html taginput
import Textbox from "@cronocode/react-box/components/textbox";
- Tooltip - this is useful when you need a position absolute and the parent has overflow hidden.
import Tooltip from "@cronocode/react-box/components/tooltip";
Extend props
- It is possible to extend some props like
color
,background
,backgroundImage
andshadow
function themePlugin() {
return {
name: 'themePlugin',
configResolved() {
const result = Theme.setupAugmentedProps({
colors: {
primary: '#445566'
},
backgroundImages: {
gradient: 'linear-gradient(to right, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%)'
},
shadows: {
1: '0 4px 10px rgb(224 224 224 / 52%)',
}
});
fs.writeFileSync('./src/box-theme.generated.css', result.variables);
fs.writeFileSync('./src/box.generated.d.ts', result.boxDts);
},
}
}
- Add this plugin to your build tool
Vitejs
// https://vitejs.dev/config/
export default defineConfig({
plugins: [..., themePlugin()],
})
- Include
box-theme.generated.css
in your root file
import './box-theme.generated.css';
Theme for components
In the project root file (main.tsx) use Theme.setup
import Theme from '@cronocode/react-box/theme';
Theme.setup({
button: {
styles: {
px: 4
},
themes: {
mytheme: {
px: 8
}
}
},
...
})
All styles will be applied to Button component
import Button from '@cronocode/react-box/components/button';
function MyComponent() {
return <Button>Click me</Button>
}
or is possible to use Button with specific theme
import Button from '@cronocode/react-box/components/button';
function MyComponent() {
return <Button theme="mytheme">Click me</Button>
}
Theme variables
In CSS file is possible to override default values for:
--borderColor: black;
--outlineColor: black;
--lineHeight: 1.2;
--fontSize: 14px;
--transitionTime: 0.25s;
9 days ago
11 days ago
11 days ago
17 days ago
17 days ago
19 days ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
10 months ago
10 months ago
10 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
1 year ago
2 years ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago