Skip to content

Instantly share code, notes, and snippets.

@diegocasmo
diegocasmo / Tabs.js
Created February 9, 2017 14:40
Implementation of a <Tabs/> component in React
export class Tabs extends Component {
constructor(props, context) {
super(props, context);
this.state = {
activeTabIndex: this.props.defaultActiveTabIndex
};
this.handleTabClick = this.handleTabClick.bind(this);
}
@diegocasmo
diegocasmo / Tab.js
Last active September 3, 2021 06:06
Source code for implementing a React <Tabs/> component.
import React, {PropTypes} from 'react';
export const Tab = (props) => {
return (
<li className="tab">
<a className={`tab-link ${props.linkClassName} ${props.isActive ? 'active' : ''}`}
onClick={(event) => {
event.preventDefault();
props.onClick(props.tabIndex);
}}>
@andrewk
andrewk / form-validation.md
Created March 29, 2015 10:08
Good Enough™ Form Validation in React

Good Enough™ Form Validation in React

…specifically React 0.13 using ES6 class syntax

Originally I was implementing the validator as a context, but then I got stung by parent context vs owner context. I'll likely return to the context model when React's context implementation is more final (looks like they're moving towards parent context over owner context, which I'd prefer).

Requirements

  • markup must match our existing markup, for UX consistency.
  • inputs are re-usable components with an explicit contract -- they are responsponsible for their error display and any required filtering of their value.
@CableGuy67
CableGuy67 / easytab-nest-test.html
Last active December 14, 2015 09:39
1. open page, tabs are created and show correctly. Both tab containers have the data-easytabs="true" added to them. Each tab and subtab can be navigated to. Reopen page with no hashes to start. 2. click link in TAB1 that will go to the paragraph in SUBTAB2 in TAB3 3. The panel elements now contain, TAB1 - class="" style="display: none;" TAB2 - s…
<html>
<head>
<title>nested demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="jquery.hashchange.min.js"></script>
<script src="jquery.easytabs.mroth.js"></script>
<style>
/* Example Styles for Demo */
.etabs, .sub-etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
# Setup dir and repo
mkdir underscore-string
cd underscore-string
git init
# Make some files we'll need
touch README.md package.js smart.json
# Add the submodule and checkout the desired branch
git submodule add git://github.com/epeli/underscore.string.git lib/underscore.string
@ryanmcgrath
ryanmcgrath / load_proper.js
Created January 5, 2011 22:16
How to properly branch loading of JS
/* Since script loading is dynamic, we take
a callback function with our loadScript call
that executes once the script is done downloading/parsing
on the page.
*/
var loadScript = function(src, callbackfn) {
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.setAttribute("async", "true");
newScript.setAttribute("src", src);