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.
blakeembrey / writing / pages / _template.jsx View on Github 
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' },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' },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;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('/');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)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
}
});
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><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>return (
)
}
}
StyledComponent.contextTypes = {
freeStyle: React.PropTypes.object.isRequired
}
return hoistNonReactStatics(
wrap(StyledComponent),
Component
)
}borderColor: '#ccc'
},
'pre > code': {
border: 'none',
padding: '0',
fontSize: '100%',
wordWrap: 'normal',
whiteSpace: 'pre',
backgroundColor: 'transparent'
},
'a:hover > 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>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
