Skip to content

Instantly share code, notes, and snippets.

🏂
👋

Tyler McGinnis tylermcginnis

🏂
👋
Block or report user

Report or block tylermcginnis

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@tylermcginnis
tylermcginnis / highlight.js
Created Sep 2, 2015
Highlight React Components
View highlight.js
setInterval(function() { Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(element) { element.style.background = 'rgba(255,0,0,0.1)'; }) }, 500)
View React Component Highlighter
(function(){Array.prototype.slice.call(document.querySelectorAll('[data-reactid]')).forEach(function(ele){ele.style.background = 'rgba(0, 129, 255, 0.05)'})})();
View keydown-react-example
var Test = React.createClass({
add: function(event){
if(event.keyCode == 13){
alert('Adding....');
}
},
render: function(){
return(
<div>
<input type="text" id="one" onKeyDown={this.add} />
View react-installs
npm install --save react react-dom && npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-{core,loader} babel-preset-react
View installs
npm install --save react react-dom && npm install --save-dev html-webpack-plugin webpack webpack-dev-server babel-{core,loader} babel-preset-{react,es2015,stage-0} style-loader css-loader
View My Sublime 3 settings
{
"auto_complete_commit_on_tab": true,
"color_scheme": "Packages/Oceanic Next Color Scheme/Oceanic Next.tmTheme",
"draw_white_space": "all",
"font_face": "Fira Mono",
"font_size": 20,
"tab_size": 2,
"theme": "Brogrammer.sublime-theme",
"translate_tabs_to_spaces": true,
"trim_automatic_white_space": true,
View Contents.json
{
"images": [
{
"extent": "full-screen",
"idiom": "iphone",
"filename": "Default-568h@2x.png",
"minimum-system-version": "7.0",
"orientation": "portrait",
"scale": "2x",
"subtype": "retina4"
View FlexboxExamples
import React, { Component } from 'react'
import { StyleSheet, Text, View, AppRegistry } from 'react-native'
class FlexboxExamples extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.box}/>
<View style={styles.box}/>
<View style={styles.box}/>
View rn-styles-start.js
import React, { Component } from 'react'
import { StyleSheet, Text, View, AppRegistry } from 'react-native'
class FlexboxExamples extends Component {
render() {
return (
<View style={styles.container}>
<View style={styles.box}/>
<View style={styles.box}/>
<View style={styles.box}/>
You can’t perform that action at this time.