| import { FluidRatio } from './FluidRatio'; | |
| <FluidRatio> | |
| {(width, height) => ( | |
| <div style={{ width, height }}>This will be a ratio of 3/4 with a width of whatever container it is rendered into.</div> | |
| )} | |
| </FluidRatio> |
Can't share the complete code because the app's closed source and still in stealth mode, but here's how I'm using React Router and Redux in a large app with server rendering and code splitting on routes.
addReducers() callback available to the getComponents() method of
each React Router route. Each route is responsible for adding any Redux
reducers it needs when it's loaded. (This isn't really necessary on the
| import React, { Component } from 'react'; | |
| import { createStore, combineReducers, applyMiddleware, bindActionCreators } from 'redux'; | |
| import { provide, connect } from 'react-redux'; | |
| import thunk from 'redux-thunk'; | |
| const AVAILABLE_SUBREDDITS = ['apple', 'pics']; | |
| // ------------ | |
| // reducers | |
| // ------------ |
| /** | |
| * Adapted from https://github.com/Khan/react-components/blob/master/js/timeout-transition-group.jsx | |
| */ | |
| var React = require('react/addons'); | |
| var ReactTransitionGroup = React.addons.TransitionGroup; | |
| var Velocity = require('velocity-animate'); | |
| var transitions = { | |
| // Forcefeeding: property order = [after, before] |
| // So.. this code: | |
| if (foo) { | |
| goto fail; | |
| goto fail; | |
| } | |
| else if (bar) { | |
| goto fail; | |
| goto fail; | |
| } | |
| else if (bam) { |
| { | |
| "requireCurlyBraces": ["else", "for", "while", "do", "try", "catch"], | |
| "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"], | |
| "disallowLeftStickedOperators": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], | |
| "disallowRightStickedOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="], | |
| "requireRightStickedOperators": ["!"], | |
| "requireLeftStickedOperators": [","], | |
| "disallowImplicitTypeConversion": ["string"], | |
| "disallowKeywords": ["with"], | |
| "disallowMultipleLineBreaks": true, |
| (function(exports) { | |
| function nop() {} | |
| // IE doesn't always have console, place a no-op shim for it. | |
| if (!window.console) { | |
| window.console = {log: nop, info: nop, warn: nop, error: nop}; | |
| } | |
| // Transforms an Error to a simple object that can be JSONified. | |
| function error_to_object(error) { |
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>test</title> | |
| </head> | |
| <body> | |
| <script> | |
| // alerts 'fake' then 'real' |
| #!/bin/bash | |
| # Favicon and Apple Touch Icon Generator | |
| # | |
| # This bash script takes an image as a parameter, and uses ImageMagick to convert it to several | |
| # other formats used on modern websites. The following copies are generated: | |
| # | |
| # * apple-touch-icon-114x114-precomposed.png | |
| # * apple-touch-icon-57x57-precomposed.png | |
| # * apple-touch-icon-72x72-precomposed.png |
Consumer key: IQKbtAYlXLripLGPWd0HUA
Consumer secret: GgDYlkSvaPxGxC4X8liwpUoqKwwr3lCADbz8A7ADU
Consumer key: 3nVuSoBZnx6U4vzUxf5w
Consumer secret: Bcs59EFbbsdF6Sl9Ng71smgStWEGwXXKSjYvPVt7qys
Consumer key: CjulERsDeqhhjSme66ECg