use-styled-system v3.0.0

use-styled-system

A custom React Hook to help you implement "styled system props" in combination with styled-jsx for your application.

How it works

use-styled-system provides a custom hook to inject all common styled-system props into <style jsx> 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.

Currently 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.

<Box as='div' p={['20px 10px', 60]}>...</Box>

translates into the following for matchMedia below the first breakpoint ie. 600px

<div class="jsx-123">
...
</div>
<style>
   .jsx-123 {
       padding: 20px 10px
   }
</style>

and automatically changes to the below once the next media query is triggered.

<div class="jsx-123">
...
</div>
<style>
   .jsx-123 {
       padding: 60px
   }
</style>

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

$ 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.

/* import only the Types that you need */
import { FC } from 'react';
import { Decor, Layout, Space, useStyledSystem } from 'use-styled-system';

export const Box: FC<Space & Layout & Decor> = (props) => {
  
  const { styleJsx, nonCssProps } = useStyledSystem(props, { Space: true, Layout: true, Decor: true });
  
  return <>
      <div {...nonCssProps}>{props.children}</div>
      <style jsx>{`
        div {
          color: red;
          ${styleJsx}
        }
      `}</style>
  </>
}

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.

Parameters

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.

Return object

A useStyleSystem object is returned with the following properties.

Examples

Using style-jsx/css .resolve functionality to create custom elements.

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<BoxProps & CSS> = ({ 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.

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<LinkProps & Space & Layout & Decor> = ({ 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 <>
    <NextLink href={href}>
      <a target={target} className={classNames} onClick={onClick} {...nonCssProps}>{title}</a>
    </NextLink>
    
    <style jsx>{`
      .link {
        cursor: pointer;
        color: var(--color-link);
        font-family: inherit;
        text-decoration: none;
        transition: color 0.25s, background-color 0.25s;

        &.small {
          font-size: 1.4rem;
        }

        &.large {
          font-size: 1.8rem;
        }
        
        &:hover {
          color: var(--color-link-hover)
        }

        ${styleJsx}
      }
    `}</style>
  </>;
};

export default Link;

License

MIT Licensed