How to use styletron-client - 7 common examples

To help you get started, we’ve selected a few styletron-client examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github styletron / styletron / packages / styletron-singleton / src / browser.js View on Github external
import { INSTANCE_KEY, ELEMENT_CLASS_NAME } from './constants';
import StyletronClient from 'styletron-client';

const topLevel = typeof window !== 'undefined' ? window : {};

let instance = topLevel[INSTANCE_KEY];

if (!instance) {
  const existingStyles = document.getElementsByClassName(ELEMENT_CLASS_NAME);
  const styles = existingStyles.length > 0
    ? existingStyles
    : [createStyleElement()];
  const styletron = new StyletronClient(styles);
  instance = topLevel[INSTANCE_KEY] = styletron;
}

export default instance;

function createStyleElement() {
  const styleElement = document.createElement('style');
  styleElement.className = ELEMENT_CLASS_NAME;
  document.head.appendChild(styleElement);
  return styleElement;
}
github joelpurra / talkie / src / split-environments / webextension / styletron-provider.js View on Github external
getSync() {
        const styletron = new Styletron();

        return styletron;
    }
}
github joeshub / css-in-react / 15-styletron / src / entry.js View on Github external
import React from 'react'
import { render } from 'react-dom'
import Styletron from 'styletron-client'
import { StyletronProvider } from 'styletron-react'

import LikeButton from './LikeButton'

import '../styles/style.scss'

const styleSheet = document.createElement('style')
document.head.appendChild(styleSheet)
const styletron = new Styletron([styleSheet])

render(
  
, document.getElementById('output'))
github joeshub / css-in-react / 06-styletron / button / App.js View on Github external
import React, { Component } from 'react'
import Styletron from 'styletron-client'
import { StyletronProvider } from 'styletron-react'
import pkg from './package.json'
import { Button } from './Button'

const styleSheet = document.createElement('style')
document.head.appendChild(styleSheet)
const styletron = new Styletron([ styleSheet ])

export default class App extends Component {
  render () {
    return (
      
        <main>
          <p>{pkg.description}</p>
          <button>Button</button>
        </main>
      
    )
  }
}
github A-gambit / CSS-IN-JS-Benchmarks / packages / benchmarks / styletron / client / Table.js View on Github external
table.map((row, i) =&gt;
        
          {
            row.map((x, j) =&gt;
              {toPercent(x)}
            )
          }
        
      )
    }
  

const styleSheet = document.createElement('style');
document.head.appendChild(styleSheet);

const styletron = new Styletron([styleSheet]);

export default ({ table, toPercent }) =&gt; (
  
    
  
);

styletron-client

Universal, high-performance JavaScript styles

MIT
Latest version published 7 years ago

Package Health Score

53 / 100
Full package analysis

Popular styletron-client functions

Similar packages