This is a react base component which will reduce considerably necessity to write css code.
- 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
- Box - base component with a tons of props
import Box from "@cronocode/react-box";
-
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";
- 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';
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>
}
In CSS file is possible to override default values for:
--borderColor: black;
--outlineColor: black;
--lineHeight: 1.2;
--fontSize: 14px;
--transitionTime: 0.25s;