Introduction

Overview

Jynx is a performant and intuitive utility library for the 'CSS-in-JS era', allowing for responsive, theme-focused, type-safe styled-components to be rapidly created and controlled, directly from your jsx.

Installation

To install Jynx run:

yarn add jynx

# or

npm i jynx

The library needs to be used in tandem with a CSS-in-JS framework. There are a ton to choose from, but some of the most popular are:

• 💅 styled-components
• 👩‍🎤 emotion

One of the Jynx's main selling points is that it's completely type-safe, meaning you'll get helpful suggestions and errors within your IDE.

Whilst the majority of the docs assume you are using Typescript, (highlighting where and how to type components, etc) this is by no means required.

Your first component

Once you've installed Jynx and your chosen CSS-in-JS framework, you're ready to start creating components.

To do so, define a styled-component using the ColorProps type and include the color function within it's style argument.

import styled from 'styled-components'
import { color, ColorProps } from 'jynx'

export const Container = styled.div<ColorProps>`
  ${color}
`

Including the color function allows the Container component to receive three additional props: color, backgroundColor, and opacity. To use it, simply pass the color styles you want to the relevant props.

const ReactComponent: React.FC = () =>  {
  return (
    <Container color='violet' backgroundColor='#7fffd4'>
      I <3 using Jynx
    </Container>
  )
}

Responsive styles

Often we want to adjust our styles based on the size of our users viewport.

All props within Jynx accept 'responsive styles', meaning they can receive styles as an array or object, which are then mapped to media queries generated from the current themes breakpoints.

const ReactComponent: React.FC = () =>  {
  return (
    <Container
      color={['violet', 'orange', 'green', 'blue']}
      backgroundColor={{_: '#7fffd4', lg: '#53d8ab'}}
    >
      I <3 using Jynx
    </Container>
  )
}

Find out more by heading to the dedicated responsive styles page in the docs

Themes

In order to help create a more consistent and coherent visual experience, it can be useful to store common style values in a global theme.

Jynx supports the use of themes, with many style function props able to pull values directly from select theme scales.

/* theme.ts */
export const theme = {
  colors: {
    red: '#F2335D',
    orange: '#FE8400',
    yellow: '#FFCC00',
    green: '#7CD420',
    blue: '#12A5EC',
    purple: '#7753F8'
  }
}

To get up-and-running quickly, visit the 'Getting Started' section's themes page.

For a more comprehensive breakdown of the setup process (including integration with Typescript) head to the setup page of the theming section.

Taking things further

You can include multiple functions in the component's style argument to allow further styling:

import styled from 'styled-components'
import { color, ColorProps, space, SpaceProps, typography, TypographyProps } from 'jynx'

/* You can create a reusable intersection type here */
/* to keep all our prop types in one place */
type Props = ColorProps & SpaceProps & TypographyProps

export const Container = styled.div<Props>`
  ${color}
  ${space}
  ${typography}
`

You now have access to margin, padding and typography related props meaning you can really start to flesh out the component.

const ReactComponent: React.FC = () =>  {
  return (
    <Container
      color={['violet', 'orange', 'green', 'blue']}
      backgroundColor={{_: '#7fffd4', lg: '#53d8ab'}}
      marginBlock={[24, 32, 40, 48]}
      marginInline={[8, 12, null, 16]}
      padding={[8, null, 16]}
      fontSize={{ _: '1rem', md: '1.25rem', lg: 64 }}
      fontWeight={700}
      lineHeight={[1.6, 1.4, 1.25]}
      fontStyle='italic'
    >
      I <3 using Jynx
    </Container>
  )
}