elemental-design / elemental-design/elemental-react
Standardise around Yoga CSS and styled-system API
- Dominant language
- TypeScript
- Stars
- 22
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
Support 100% of Yoga CSS API.
Support `styled-system` aliases with proposed system:
```js
const useStyles = (styles) => {
return useMemo(() => {
const parsedStyles = parseStyles(styles);
return StyleSheet.create(parsedStyles);
}, styles);
};
const filterStyles = props => props.filter(prop => ['backgroundColor, 'color, 'fontSize'].includes(prop);
const filterProps = props => props.filter(prop => !['backgroundColor, 'color, 'fontSize'].includes(prop);
const Box = (props) => {
const styles = filterStyles(props);
const style = useStyles(styles);
return ;
};
```
```js
const mapping = {
bg: backgroundColor,
p: padding,
pt: paddingTop,
pb: paddingBottom,
pl: paddingLeft,
pr: paddingRight,
m: margin,
mt: marginTop,
mb: marginBottom
// ...
};
const parseStylesheet = (styles) => {
const parsedStyles = {};
Object.entries(styles).forEach(([att, val]) => {
if (mapping[att]) {
parsedStyles[mapping[att]] = val;
}
});
return parsedStyles;
}
```
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.