Jynx logoJynx
Jynx logo

Jynx

Rapidly create and control responsive, theme-focused and type-safe styled-components

yarn add jynx
GitHub Workflow StatusnpmnpmGitHub Repo StarsGitHub Repo Lisence

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.

Originally built in-house by Silk Studio to streamline our own development pipeline, Jynx is now availbe to use in your own projects and comes with support for:

  • rapid component styling through the use of style-props
  • using objects and arrays to create mobile-first, responsive designs
  • intergation with a global theme that's accessed directly from your props
  • written in Typescript and fully type-safe

Getting Started

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:

Once installed, define a component using the ColorProps type and include the color function within it's style argument. This will allow you to pass your chosen value(s) directly from your tsx/jsx:

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

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

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

Or use an array to pass a responsive value:

const ReactComponent: React.FC = () =>  {
  return (
    <Container color={['violet', '#a6dbc1', '#823623', '#604f73']}>
      I <3 using Jynx
    </Container>
  )
}

Include additional Jynx functions within the components style argument to add further styling capibilities:

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

const Container = styled.div<ColorProps & SpaceProps & TypographyProps>`
  ${color}
  ${space}
  ${typography}
`

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>
  )
}