@gedesurya125/surya-ui v2.5.4
Surya-Ui
It's based on theme-ui and framer-motion
- It has responsive rem value with default of six breakpoints
- It has helper function and usefull hooks that can help you to create fully responsive websites
- The useActiveBreakpoints hooks is purposed to allow create different methods for each breakpoints but you also can do more things with that, eg: create different animation
- It has default GridTemplate Components that grow based on value that you can customize
- The GridTemplate has 12 breakpoints for small screen and 24 breakpoints for large screen, but you can still allowed to customize it, including the gap and each grid width, by creating themeConfig instances from ThemeConfigs Classes
- The Width of GridTemplate container can be customize as well
Basic Use
Wrapp your component in the ThemeProvider and you ready to use responsive rem value which 1 rem equal to 10px for each breakpoints.
import YourComponent from './YourComponent'
import { ThemeProvider } from '@gedesurya125/surya-ui';
// theme is same with theme object of theme-ui value
import theme from '.theme'
function App() {
return (
<ThemeProvider theme={theme}>
<YourComponent>
</ThemeProvider>
);
}
Theme Object Example
theme object based on theme-ui. and the breakpoints and root fontSize is already setup behind the scenes
// theme.ts
import { Theme } from 'theme-ui';
export const theme: Theme = {
// breakpoints : ThemeConfig.breakpoints.slice(1), // already setup behind the scenes
// styles: {
// root: {
// fontSize: ThemeConfig.getResponsiveFontSizes(), // already setup behind the scenes
// },
// },
fonts: {
body: 'sans-serif',
heading: 'sans-serif',
monospace: 'sann-serif',
},
// other theme-ui styles goes here
};
Default Values
- breakpoints
[
'320px',
'500px',
'@media (min-width:720px) and (orientation: portrait)',
'@media (min-width:700px) and (orientation: landscape)',
'1000px',
'1200px',
];
- targetScreenSizes
[375, 640, 834, 812, 1194, 1440];
columnGaps
columnGaps is the space between columns for each breakpoints. each columnGaps value is considered in responsice rem units.
[0.3, 0.4, 0.4, 0.4, 0.5, 0.6];
columnAmounts
columnAmounts represent the number of columns for each breakpoints
[12, 12, 24, 24, 24, 24];
containerWidths
containerWidths is the width of the Container Based Components, eg: GridTemplate
[35, 58, 74, 74, 100, 125];
growRatio
growRatio is growing ration of the responsive rem value, by default it's set to 8.5
normalizedRemValue
normailizedRemValue is the start value for 1 rem at breakpoints value, it's set to 10 by default
CUSTOMIZE The Config
- Creata a themeConfig instances by using ThemeConfig Class
// themeConfigs.js
import { ThemeConfigs } from '@gedesurya125/surya-ui';
export const themeConfigs = new ThemeConfigs({
columnGaps: [0.3, 0.4, 0.4, 0.4, 0.5, 0.6],
columnAmounts: [12, 12, 24, 24, 24, 24],
containerWidths: [35, 58, 74, 74, 100, 125],
growRatio: 8.5,
normalizedRemValue: 10,
breakpoints: [
'320px',
'500px',
'@media (min-width:720px) and (orientation: portrait)',
'@media (min-width:700px) and (orientation: landscape)',
'1000px',
'1200px',
],
targetScreenSizes: [375, 640, 834, 812, 1194, 1440],
});
- Import the themeConfigs instances to ThemeProvider
import YourComponent from './YourComponent'
import { ThemeProvider } from '@gedesurya125/surya-ui';
import { themeConfigs } from './themeConfigs'
// theme is same with theme object of theme-ui value
import theme from '.theme'
function App() {
return (
<ThemeProvider theme={theme} config={themeConfigs}>
<YourComponent>
</ThemeProvider>
);
}
Hooks
useThemeConfig this return current theme config instaces, and you can access allcurrent applied config value using that instance:
import { useThemeConfig } from '@gedesurya125/surya-ui'; const ReactComponent = () => { const config = usThemeConfig(); /** * Available access * config.columnGaps * config.columnAmounts * config.containerWidths * config.growRatio * config.normalizedRemValue * config.breakpoints * * Methods * config.getResponsiveFontSizes() * config.getColumnWidths() * config.getGridTemplateColumns() * config.getContainerWidth() * config.getColumnGaps() * config.getGridTemplateMargins() * config.getGridTemplateMarginsNormalizers() */ };
useActiveBreakpoints This hooks return an array of boolean active breakpoints
// inside react component const activeBreakpoints = useActiveBreakpoints(); // activeBreakpoints = [true, true, true, false, false, false] // it indicates the current active breakpoints is at (min-width: 800px) and (orientation: 'portrait') as the last true value at index of 3
2 years 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
2 years ago
2 years ago
2 years ago