docs: update example

README.md

@@ -1,4 +1,4 @@
-# react-down
+# <span style="color: #883DAA;font-family: "Helvetica Neue", sans;">react-down ⚛ ⬇</span>
 [![npm version](https://badge.fury.io/js/react-down.svg)](https://badge.fury.io/js/react-down)
 [![Build Status](https://travis-ci.org/mfellner/react-down.svg?branch=master)](https://travis-ci.org/mfellner/react-down)
 [![Coverage Status](https://coveralls.io/repos/github/mfellner/react-down/badge.svg?branch=master)](https://coveralls.io/github/mfellner/react-down?branch=master)
@@ -7,7 +7,7 @@ Transform Markdown to React elements.
 
 ### Introduction
 
-react-down is a simple library and React component to transform Markdown formatted text into native React elements. react-down uses [markdown-it](https://markdown-it.github.io) to parse Markdown and directly translate it into a structure of React element instances.
+react-down is a simple library and React component to transform Markdown formatted text into native React elements. react-down uses [markdown-it](https://markdown-it.github.io) to parse Markdown and directly translate it into a structure of React elements.
 
 ### Usage
 

example/src/App.js

@@ -1,31 +1,35 @@
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import styled from 'styled-components'
 import plugins from './plugins'
 import TextArea from './TextArea'
 import ReactDown from '../../lib'
 import { Page, Row, Column } from 'hedron'
 
-const DEFAULT_TEXT = `# Hello, react-down!
-
-*This* is **markdown**.
-
-~~~javascript
-function() {
-  console.log('what is code')
-}
-~~~
-`
-
 const Title = styled.h1`
   color: #883DAA;
   font-family: "Helvetica Neue", sans;
+  margin-bottom: 0;
+`
+
+const Wrapper = styled.div`
+  h1 {
+    margin: 0;
+  }
+
+  li p {
+    margin: 0.25em;
+  }
 `
 
 export default class App extends Component {
+  static propTypes = {
+    defaultText: PropTypes.string
+  }
+
   constructor(props) {
     super(props)
     this.state = {
-      src: DEFAULT_TEXT
+      src: this.props.defaultText
     }
   }
 
@@ -42,10 +46,14 @@ export default class App extends Component {
       </Row>
       <Row>
         <Column sm={12} md={6}>
-          <TextArea text={DEFAULT_TEXT} onChanged={this.onTextChanged.bind(this)}/>
+          <TextArea
+            defaultText={this.props.defaultText}
+            onChanged={this.onTextChanged.bind(this)}/>
         </Column>
         <Column sm={12} md={6}>
-          <ReactDown src={this.state.src} plugins={plugins}/>
+          <Wrapper>
+            <ReactDown src={this.state.src} plugins={plugins}/>
+          </Wrapper>
         </Column>
       </Row>
     </Page>

example/src/TextArea.js

@@ -11,14 +11,15 @@ const TextBox = styled.textarea`
 
 export default class TextArea extends Component {
   static propTypes = {
-    text: PropTypes.string,
+    defaultText: PropTypes.string,
+    rows: PropTypes.number,
     onChanged: PropTypes.func
   }
 
   constructor(props) {
     super(props)
     this.state = {
-      text: this.props.text
+      text: this.props.defaultText || ''
     }
   }
 
@@ -30,9 +31,10 @@ export default class TextArea extends Component {
   }
 
   render() {
-    const props = {ref: node => this.node = node}
+    const style = {resize: this.props.rows ? 'vertical' : 'none'}
     return <TextBox
-      rows={10}
+      style={style}
+      rows={this.props.rows || (() => this.state.text.split('\n').length)()}
       value={this.state.text}
       onChange={this.onInputChanged.bind(this)}/>
   }

example/src/index.js

@@ -3,4 +3,17 @@ import ReactDOM from 'react-dom'
 import App from './App'
 import 'normalize.css'
 
-ReactDOM.render(<App/>, document.getElementById('main'))
+const DEFAULT_TEXT = `# Hello, react-down!
+
+*This* is **markdown**.
+
+> Quotes are pretty cool.
+
+~~~javascript
+function() {
+  console.log('what is code')
+}
+~~~
+`
+
+ReactDOM.render(<App defaultText={DEFAULT_TEXT}/>, document.getElementById('main'))

example/src/plugins.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import SyntaxHighlighter from 'react-syntax-highlighter'
+import styled from 'styled-components'
 
 function syntax(type, props, children, token) {
   if (type === 'code') {
@@ -14,4 +15,31 @@ function syntax(type, props, children, token) {
   }
 }
 
-export default [syntax]
+const BlockQuote = styled.blockquote`
+  background: #f9f9f9;
+  border-left: 10px solid #ccc;
+  margin: 1.5em 0;
+  padding: 0.5em 10px;
+  quotes: "\\201C""\\201D""\\2018""\\2019";
+
+  &:before {
+    color: #ccc;
+    content: open-quote;
+    font-size: 4em;
+    line-height: 0.1em;
+    margin-right: 0.25em;
+    vertical-align: -0.4em;
+  }
+
+  & p {
+    display: inline;
+  }
+`
+
+function blockquote(type, props, children, token) {
+  if (type === 'blockquote') {
+    return React.createElement(BlockQuote, props, children)
+  }
+}
+
+export default [syntax, blockquote]