Update Documentation And Add Examples (#136)

casesandberg · Nov 13, 2016 · 5cb96eb · 5cb96eb
1 parent 3c7dd5c
commit 5cb96eb
Show file tree

Hide file tree

Showing 9 changed files with 60 additions and 99 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 [![License][license-image]][license-url]
 [![Downloads][downloads-image]][downloads-url]
 
-## Inline Styles in JS with support for [React](http://reactcss.com/#react), [Redux](http://reactcss.com/#redux), [React Native](http://reactcss.com/#react-native), [Autoprefixing](http://reactcss.com/#autoprefixing), [Hover](http://reactcss.com/#hover), [Pseudo-Elements](http://reactcss.com/#pseudo-elements) & [Media Queries](http://reactcss.com/#media-queries)
+## Inline Styles in JS with support for [React](http://reactcss.com/#react), [React Native](http://reactcss.com/#react-native), [Autoprefixing](http://reactcss.com/#autoprefixing), [Hover](http://reactcss.com/#hover), [Pseudo-Elements](http://reactcss.com/#pseudo-elements) & [Media Queries](http://reactcss.com/#media-queries)
 
 ## Install
 
@@ -59,6 +59,16 @@ const styles = reactCSS({
 ## Documentation
 See the [Full Documentation](http://reactcss.com)
 
+## Examples
+
+Examples and projects built with reactCSS:
+
+[Felony](https://github.com/henryboldi/felony) - Next Level PGP Desktop App
+[React Color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
+[Buffer App Components](https://www.npmjs.com/package/@bufferapp/components) - A shared set of UI Components
+[React Reactions](https://github.com/casesandberg/react-reactions) - Use Reactions from Slack, Facebook, Pokemon, Github and Youtube
+
+
 [travis-svg]: https://travis-ci.org/casesandberg/reactcss.svg
 [travis-url]: https://travis-ci.org/casesandberg/reactcss
 [deps-svg]: https://david-dm.org/casesandberg/reactcss.svg

diff --git a/docs/documentation/examples.md b/docs/documentation/examples.md
@@ -0,0 +1,11 @@
+---
+id: examples
+title: Examples
+---
+
+Examples and projects built with reactCSS:
+
+[Felony](https://github.com/henryboldi/felony) - Next Level PGP Desktop App
+[React Color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
+[Buffer App Components](https://www.npmjs.com/package/@bufferapp/components) - A shared set of UI Components
+[React Reactions](https://github.com/casesandberg/react-reactions) - Use Reactions from Slack, Facebook, Pokemon, Github and Youtube
diff --git a/docs/documentation/index.js b/docs/documentation/index.js
@@ -1,4 +1,4 @@
-/* eslint global-require: 0 */
+/* eslint-disable global-require */
 
 module.exports = {
   '00': require('./intro.md'),
@@ -7,12 +7,10 @@ module.exports = {
   '00.03-activating-classes': require('./intro-activating-classes.md'),
   '01-react': require('./react.md'),
   '01.01-state-props': require('./react-state-props.md'),
-  '02-redux': require('./redux.md'),
-  '02.01-props': require('./redux-props.md'),
-  '03-react-native': require('./react-native.md'),
-  '03.01-props': require('./react-native-props.md'),
-  '04-autoprefixing': require('./autoprefixing.md'),
-  '05-hover': require('./hover.md'),
-  '06-pseudo-classes': require('./pseudo-classes.md'),
-  '07-media-queries': require('./media-queries.md'),
+  '02-react-native': require('./react-native.md'),
+  '03-autoprefixing': require('./autoprefixing.md'),
+  '04-hover': require('./hover.md'),
+  '05-pseudo-classes': require('./pseudo-classes.md'),
+  '06-media-queries': require('./media-queries.md'),
+  '07-examples': require('./examples.md'),
 }
diff --git a/docs/documentation/intro.md b/docs/documentation/intro.md
@@ -5,4 +5,4 @@ hideTitle: true
 ---
 *NEW IN 1.0.0*
 
-# Inline Styles in JS with support for [React](#react), [Redux](#redux), [React Native](#react-native), [Autoprefixing](#autoprefixing), [Hover](#hover), [Pseudo-Elements](#pseudo-elements) & [Media Queries](#media-queries)
+# Inline Styles in JS with support for [React](#react), [React Native](#react-native), [Autoprefixing](#autoprefixing), [Hover](#hover), [Pseudo-Elements](#pseudo-elements) & [Media Queries](#media-queries)
diff --git a/docs/documentation/react-native-props.md b/docs/documentation/react-native-props.md
diff --git a/docs/documentation/react-native.md b/docs/documentation/react-native.md
@@ -3,7 +3,7 @@ id: react-native
 title: React Native
 ---
 
-Define styles in the render method and attach them to the JSX via inline styles:
+Using reactCSS in React Native works exactly the same as you would for the web! Define styles in the render method and attach them to the JSX via inline styles:
 ```
 class Game2048 extends React.Component {
   render() {

diff --git a/docs/documentation/react.md b/docs/documentation/react.md
@@ -32,3 +32,32 @@ class Component extends React.Component {
   }
 }
 ```
+
+or if you are using stateless components:
+
+``` js
+const Component = () => {
+  const styles = reactCSS({
+    'default': {
+      card: {
+        background: '#fff',
+        boxShadow: '0 2px 4px rgba(0,0,0,.15)',
+      },
+      title: {
+        fontSize: '2.8rem',
+        color: props.color,
+      },
+    },
+  })
+
+  return (
+    <div style={ styles.card }>
+      <div style={ styles.title }>
+        { this.props.title }
+      </div>
+
+      { this.props.children }
+    </div>
+  )
+}
+```
diff --git a/docs/documentation/redux-props.md b/docs/documentation/redux-props.md
diff --git a/docs/documentation/redux.md b/docs/documentation/redux.md