Last active
August 13, 2016 18:21
-
-
Save daaain/76fc4fc5ed970acc7c8d to your computer and use it in GitHub Desktop.
Quick prototyping boilerplate: React + Babel + Foundation + Sheetrock. See it running here: http://www.danieldemmel.me/in-browser-prototype-boilerplate/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Prototype</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation-flex.css"> | |
| <script src="https://fb.me/react-with-addons-15.3.0.js" type="text/javascript"></script> | |
| <script src="https://fb.me/react-dom-15.3.0.js" type="text/javascript"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js" type="text/javascript"></script> | |
| <script src="https://cdn.rawgit.com/chriszarate/sheetrock/master/dist/sheetrock.min.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/babel"> | |
| let HelloTable = (props) => { | |
| let mappable = (component) => { | |
| return (x, i) => { | |
| return component({key: i}, x); | |
| } | |
| }; | |
| let td = mappable(React.DOM.td); | |
| let tr = mappable(React.DOM.tr); | |
| let th = mappable(React.DOM.th); | |
| let renderTableBody = (tableData) => { | |
| return tableData.map((row, i, arr) => { | |
| if(i > 0) return tr(row.cellsArray.map(td), i, arr); | |
| }); | |
| }; | |
| return ( | |
| <div> | |
| <table className="stack hover"> | |
| <thead> | |
| <tr>{props.sheetsData.rows[0].cellsArray.map(th)}</tr> | |
| </thead> | |
| <tbody>{renderTableBody(props.sheetsData.rows)}</tbody> | |
| </table> | |
| </div> | |
| ); | |
| }; | |
| function handleSpreadsheetData(error, options, response) { | |
| console.log('Sheetrock', 'error', error, 'options', options, 'response', response); | |
| ReactDOM.render( | |
| <HelloTable sheetsData={response} />, | |
| document.getElementById('proto') | |
| ); | |
| } | |
| window.loadSpreadsheetData = () => { | |
| sheetrock({ | |
| url: 'https://docs.google.com/spreadsheets/d/1Gn50ovdLMMv_uoMevojl46BZbliaLolgZDtHD1FIpOs/edit#gid=0', | |
| callback: handleSpreadsheetData | |
| }); | |
| } | |
| </script> | |
| <h1>Prototyping awesomeness</h1> | |
| <button class="button" type="button" onclick="loadSpreadsheetData();">Load spreadsheet data</button> | |
| <div id="proto"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment