[react-jss] Without a HOC

From @kof on February 7, 2016 18:10

As an alternative approach to current, we can render sheets as a child element.

const sheet = jss.createStyleSheet(style)

render() {
  return (
    <div>
      <Jss sheet={sheet} />
    </div>
  )
}

Ref counting can be achieved by using a WeakMap.

const map = new WeakMap()

class Jss {
  componentWillMount() {
    const {sheet} = this.props
    const counter = map.get(sheet) || 0
    if (!counter) sheet.attach()
    map.set(sheet, counter + 1)
  }

  componentWillUnmount() {
    const {sheet} = this.props
    const counter = map.get(sheet) - 1
    if (counter) {
      map.set(sheet, counter)
    } else {
      sheet.detach()
      map.delete(sheet)
    }
  }

  render() {
    return null
  }
}

Copied from original issue: cssinjs/react-jss#31

[HenriBeck]

From @kof on July 13, 2017 18:6

Another idea:

const styles = {
  button: {
    color: 'red'
  }
}

const StyledButton = () => (
      <Jss styles={styles}>
        {({classes}) => (
          <button className={classes.button}>My Button</button>
        )}
      </Jss>
)

[kof]

I think we should close this one in favor of #907, wdyt?