No Packages Misplaced

    @beatgig/synth-react
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    @beatgig/synth-react

    React bindings for Synth.

    Installation

    yarn add @beatgig/synth-react

    Usage

    import React from 'react'
    import styled from 'styled-components'
    import ReactDOM from 'react-dom'
    import { getTokenValue } from '@beatgig/synth-core'
    import { SynthProvider, SynthConsumer } from '@beatgig/synth-react'
    import { withTokens } from '@beatgig/synth-css'
    
    const tokens = {
      '@coolBlue': 'blue',
    
      color: {
        background: {
          button: 'red',
          otherButton: '@coolBlue',
        },
      },
    }
    
    const Button = styled.button`
      ${({ synth }) => synth.backgroundColor('button')}
    `
    
    const OtherButton = styled.button`
      ${({ synth }) => synth.backgroundColor('otherButton')}
    `
    
    ReactDOM.render(
      <SynthProvider value={{
        tokens,
        ...withTokens(tokens),
      }}>
        <Button>A Red Button<Button>
        <SynthConsumer>
          {(synth) => (
            <OtherButton
              title={`Using this cool blue: ${getTokenValue(synth.tokens, '@coolBlue')}`}
            >
              A Blue Button
            </OtherButton>
          )}
        </SynthConsumer>
      </SynthProvider>,
      document.getElementById('root')
    )

    Keywords

    none

    Install

    npm i @beatgig/synth-react

    DownloadsWeekly Downloads

    3

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    77.8 kB

    Total Files

    40

    Last publish

    Collaborators

    • fernandorojo
    • jerber8
    • elving
    • beatgigllc