React hook to implement styled-system functionality within styled-jsx
npm install use-styled-systemuse-styled-system provides a custom hook to inject all common styled-system props into tags. Its especially made to work seamless within any NextJs environment. The hook is completely build with Typescript and provides excellent support for all CSS props, including proper scoping.
use-styled-system uses Javascript and .matchMedia media queries and global context for responsive css. The syntax is the same as with styled system. i.e.
JSX
...
`
translates into the following for matchMedia below the first breakpoint ie. 600px
`HTML
...
`
and automatically changes to the below once the next media query is triggered.
`HTML
...
`
Roadmap
In next versions the focus will be on adding support for Pseudo Selectors, CSS based Media Queries and autoprefix injection.
Requirement
To use use-styled-system, you must use styled-jsx@3.0.0 and react@16.8.0 or greater which includes Hooks (both shipped with Nextjs).
Installation
`sh
$ npm i use-styled-system
`
Usage
The usage within a NextJs environment works out of the box. Any other environment needs react & styled-jsx as a peer dependency. Refer to their docs for more information.
`tsx
/ import only the Types that you need /
import { FC } from 'react';
import { Decor, Layout, Space, useStyledSystem } from 'use-styled-system';
export const Box: FC = (props) => {
const { styleJsx, nonCssProps } = useStyledSystem(props, { Space: true, Layout: true, Decor: true });
return <>
{props.children}
>
}
`
use-styled-system returns an Abject with two items:
1. styleJSX which is a string containing all CSS properties and values
2. nonCssProps which is an Object with the previously added Props, filtered for any Css props.
$3
You pass useStyledSystem the props (or rest of props, using the ... spread operator) an optional Config object. The configuration object may contain the following keys.
| Key | Description | Type | Default |
|:------------------|:-------------------------------------------------------------------------------------|:-------------------------| :-----------------------------------------------------------------------------------|
|remBase | Sets the base size to use rem properties wherever possible (defaults to 10px) | number | 10 |
|fontSizes | Sets the fontsizes shortcuts for common sizes. i.e.fontSize={3} equals to 20px | (number)[] | [12, 14, 16, 20, 24, 32, 48, 64, 72] |
|spaceSizes | Sets the space shortcuts for common sizes. i.e.marginBottom={3} equals to 16px | (number)[] | [0, 4, 8, 16, 32, 64, 128, 256, 512] |
|Padding | Activates Padding properties to be used as Props | boolean | false |
|Margin | Activates Margin properties to be used as Props | boolean | false |
|Size | Activates Size properties to be used as Props | boolean | false |
|Space | Shortcut to activate Padding, Margin, and Size properties as Props | boolean | false |
|Position | Activates Position properties to be used as Props | boolean | false |
|Flex | Activates Flex properties to be used as Props | boolean | false |
|Grid | Activates Grid properties to be used as Props | boolean | false |
|Layout | Shortcut to activate Position, Flex, and Grid properties as Props | boolean | false |
|Border | Activates Border properties to be used as Props | boolean | false |
|Color | Activates Color properties to be used as Props | boolean | false |
|Typography | Activates Typography properties to be used as Props | boolean | false |
|Decor | Shortcut to activate Border, Color, and Typography properties as Props | boolean | false |
|Other | Activates Other properties to be used as Props | boolean | false |
|All | Activates all of the above properties to be used as Props. Defaults to true if no other property is selected | boolean | false |
$3
A useStyleSystem object is returned with the following properties.
| Key | Description |
| :---------- | :------------------------------------------------------ |
| styleJsx | string of all css properties |
nonCssProps | Props filtered for any non CSS prop |
style-jsx/css .resolve functionality to create custom elements.
tsx
import { createElement, FC } from 'react';
import { CSS, useStyledSystem } from 'use-styled-system';
import { css } from 'styled-jsx/css';
type BoxProps = {
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'code' | 'blockquote' | 'a'
className?: string
onClick?: Function
}
export const Text: FC = ({ as = 'p', children, className = '', ...props }) => {
const { styleJsx, nonCssProps } = useStyledSystem(props, { Decor: true, Space: true, Other: true });
const { className: cssClass, styles } = css.resolve ${styleJsx};
return <>
{createElement(as, { className: ${cssClass} ${className}, ...nonCssProps }, children)}
{styles}
>;
};
export default Text;
`
use with styled-jsx-plugin-sass in a Link Component.
`tsx
import { FC, MouseEvent } from 'react';
import NextLink from 'next/link';
import { Decor, Layout, Space, useStyledSystem } from 'use-styled-system';
type LinkProps = {
onClick?: (event: MouseEvent) => void
href: string
title: string | JSX.Element
target?: string
className?: string
secondary?: boolean
small?: boolean
large?: boolean
};
export const Link: FC = ({ onClick, className = '', href, target, title, secondary, small, large, children, ...props }) => {
const { styleJsx, nonCssProps } = useStyledSystem(props, { Space: true, Layout: true, Decor: true });
const classNames = link ${secondary ? 'secondary' : ''} ${small ? 'small' : ''} ${large ? 'large' : ''} ${className}.trim();
return <>
{title}
>;
};
export default Link;
``