How to use react-free-style - 10 common examples

To help you get started, we’ve selected a few react-free-style 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 blakeembrey / writing / pages / _template.jsx View on Github external
import React from 'react';
import Helmet from 'react-helmet';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { create, wrap } from 'react-free-style';
import { config } from '../utils/config';

const TemplateStyle = create();
const PageStyle = create();

const activeLinkCss = { borderBottomColor: '#f20' };

// Normalize.css v6 (objectified using https://github.com/postcss/postcss-js).
TemplateStyle.registerCss({
  html: {
    lineHeight: '1.15',
    msTextSizeAdjust: '100%',
    WebkitTextSizeAdjust: '100%'
  },
  'article,aside,footer,header,nav,section': { display: 'block' },
  h1: { fontSize: '2em', margin: '0.67em 0' },
  'figcaption,figure,main': { display: 'block' },
  figure: { margin: '1em 40px' },
  hr: { boxSizing: 'content-box', height: '0', overflow: 'visible' },
  pre: { fontFamily: 'monospace, monospace', fontSize: '1em' },
github blakeembrey / writing / pages / _template.jsx View on Github external
import React from 'react';
import Helmet from 'react-helmet';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { create, wrap } from 'react-free-style';
import { config } from '../utils/config';

const TemplateStyle = create();
const PageStyle = create();

const activeLinkCss = { borderBottomColor: '#f20' };

// Normalize.css v6 (objectified using https://github.com/postcss/postcss-js).
TemplateStyle.registerCss({
  html: {
    lineHeight: '1.15',
    msTextSizeAdjust: '100%',
    WebkitTextSizeAdjust: '100%'
  },
  'article,aside,footer,header,nav,section': { display: 'block' },
  h1: { fontSize: '2em', margin: '0.67em 0' },
  'figcaption,figure,main': { display: 'block' },
  figure: { margin: '1em 40px' },
  hr: { boxSizing: 'content-box', height: '0', overflow: 'visible' },
github blakeembrey / writing / pages / index.js View on Github external
import React from 'react';
import parse from 'date-fns/parse';
import format from 'date-fns/format';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { create, wrap } from 'react-free-style';
import { filterArticles } from '../utils/pages';

const IndexStyle = create();

const subStyle = IndexStyle.registerStyle({
  color: '#777',
  fontSize: '0.8em'
});

module.exports = wrap(
  class extends React.Component {
    render() {
      const pages = filterArticles(this.props.route.pages)
        .sort((a, b) => {
          return a.path < b.path ? 1 : -1;
        })
        .reduce((pages, page) => {
          const parts = page.path.replace(/^\/|\/$/g, '').split('/');

          pages.push(
            <li>
              {parts.join(' / ')}
            </li>
          );

          return pages;
github blakeembrey / writing / pages / index.js View on Github external
import React from 'react';
import parse from 'date-fns/parse';
import format from 'date-fns/format';
import { Link } from 'react-router';
import { prefixLink } from 'gatsby-helpers';
import { create, wrap } from 'react-free-style';
import { filterArticles } from '../utils/pages';

const IndexStyle = create();

const subStyle = IndexStyle.registerStyle({
  color: '#777',
  fontSize: '0.8em'
});

module.exports = wrap(
  class extends React.Component {
    render() {
      const pages = filterArticles(this.props.route.pages)
        .sort((a, b) =&gt; {
          return a.path &lt; b.path ? 1 : -1;
        })
        .reduce((pages, page) =&gt; {
          const parts = page.path.replace(/^\/|\/$/g, '').split('/');
github hoppula / refire-app / src / components / StyleContainer.js View on Github external
import React, { Component } from 'react'
import { wrap } from 'react-free-style'

class StyleRoot extends Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

export default wrap(StyleRoot)
github blakeembrey / writing / wrappers / md.js View on Github external
const infoStyle = Style.registerStyle({
  margin: '1.5em 0',
  padding: 0,
  color: infoColor,
  fontSize: '0.85em',
  '&gt; li &gt; a': {
    color: infoColor
  },
  '&gt; li': {
    listStyle: 'none',
    display: 'inline-block',
    paddingRight: 20
  }
});

module.exports = wrap(
  class extends React.Component {
    render() {
      const { page } = this.props.route;
      const { data } = page;
      const date = parse(data.date);
      const description = pageDescription(page);

      return (
        <div>
          
            <title>{pageTitle(page)}</title>
            
            
            
            
            </div>
github blakeembrey / writing / pages / _template.jsx View on Github external
<a href="http://blakeembrey.me">About</a>
            
            <li>
              <a href="{prefixLink('/rss.xml')}">RSS</a>
            </li>
          

          <div>{this.props.children}</div>
        
      );
    }
  },
  PageStyle
);

module.exports = wrap(
  class extends React.Component {
    render() {
      return (
        <div>
          
            <title>{config.siteName}</title>
            
            
          

          <div></div></div>
github hoppula / refire-app / src / components / styles.js View on Github external
return (
        
      )
    }

  }

  StyledComponent.contextTypes = {
    freeStyle: React.PropTypes.object.isRequired
  }

  return hoistNonReactStatics(
    wrap(StyledComponent),
    Component
  )

}
github blakeembrey / writing / pages / _template.jsx View on Github external
borderColor: '#ccc'
  },
  'pre &gt; code': {
    border: 'none',
    padding: '0',
    fontSize: '100%',
    wordWrap: 'normal',
    whiteSpace: 'pre',
    backgroundColor: 'transparent'
  },
  'a:hover &gt; code': {
    borderColor: '#f20'
  }
});

const Page = wrap(
  class extends React.Component {
    render() {
      return (
        <div>
          <ul>
            <li>
              Writing
            </li>
            <li>
              <a href="http://blakeembrey.me">About</a>
            </li>
            <li>
              <a href="{prefixLink('/rss.xml')}">RSS</a>
            </li>
          </ul>
</div>
github blakeembrey / writing / wrappers / md.js View on Github external
import React from 'react';
import parse from 'date-fns/parse';
import format from 'date-fns/format';
import Helmet from 'react-helmet';
import { create, wrap } from 'react-free-style';
import { config } from '../utils/config';
import { pageTitle, pageUrl, pageDescription } from '../utils/pages';

const Style = create();
const infoColor = '#777';

const infoStyle = Style.registerStyle({
  margin: '1.5em 0',
  padding: 0,
  color: infoColor,
  fontSize: '0.85em',
  '> li > a': {
    color: infoColor
  },
  '> li': {
    listStyle: 'none',
    display: 'inline-block',
    paddingRight: 20
  }
});

react-free-style

Make React components easier and more maintainable by using JavaScript with Free Style

MIT
Latest version published 4 years ago

Package Health Score

45 / 100
Full package analysis