Skip to content

Instantly share code, notes, and snippets.

View carl0zen's full-sized avatar

Carlo Zen carl0zen

18 followers · 34 following
  • Monterrey, Mexico
View GitHub Profile
@carl0zen
carl0zen / meteor-login-with-twitter.jsx
Last active August 29, 2015 14:17
Meteor React LoginWithTwitter Component
var LoginWithTwitter = React.createClass({
getInitialState: function() {
return {loggedIn: false};
},
login: function (e) {
var that = this;
Meteor.loginWithTwitter(function() {
that.setState({ loggedIn: true });
});
@carl0zen
carl0zen / Timeline.markdown
Created April 19, 2015 21:20
Timeline
@carl0zen
carl0zen / LabelButtonMixin.jsx
Created May 9, 2015 17:53
React Mixin behavior in es6
let ReactMixin = InnerComponent => class extends React.Component{
constructor(){
super()
this.state = {count: 0}
this.increment = this.increment.bind(this);
}
increment(){
this.setState({count: this.state.count+1})
}
componentWillMount(){
@carl0zen
carl0zen / ReactComponent.sublime-snippet
Created December 2, 2015 02:32
<snippet>
<content><![CDATA[
import React from "react";
import styles from "./style";
class ${1:Component} extends React.Component {
constructor(props) {
super(props);
}
@carl0zen
carl0zen / new-react-component.sh
Last active December 2, 2015 18:50
#/bin/sh
# author: perezpriego
# This shell script creates the basic architecture of a react-component
mkdir -p $1
cd $1
touch styles.scss index.jsx
cat > index.jsx <<DELIM
import React from "react";
import styles from "./style";
@carl0zen
carl0zen / prop-receivers.jsx
Last active September 2, 2020 10:24
// Prop passing Shorthands for Styled-components
export const borderProps = props => css`
${props.borderBottom && `border-bottom: ${props.borderWidth || "1px"} solid ${color.border}`};
${props.borderTop && `border-top: ${props.borderWidth || "1px"} solid ${color.border}`};
${props.borderLeft && `border-left: ${props.borderWidth || "1px"} solid ${color.border}`};
${props.borderRight && `border-right: ${props.borderWidth || "1px"} solid ${color.border}`};
`;
export const marginProps = props => css`
${props.marginBottom && `margin-bottom: ${typeof (props.marginBottom) === "string" ? props.marginBottom : "1em"}`};
@carl0zen
carl0zen / sass-bem-example-markup.html
Last active September 2, 2020 10:21
BEM example
<body class="scenery">
<section class="scenery__sky">
<div class="sky [sky--dusk / sky--daytime] [sky--foggy]">
<div class="sky__clouds"></div>
<div class="sky__sun"></div>
</div>
</section>
<section class="scenery__ground"></section>
<section class="scenery__people"></section>
</body>
@carl0zen
carl0zen / example-styles.scss
Created November 18, 2016 20:24
Local Modules styles example
@import '~tools/theme';
:local(.root) {
border: 1px solid;
font-family: inherit;
font-size: 12px;
color: inherit;
background: none;
cursor: pointer;
display: inline-block;
@carl0zen
carl0zen / core-ui-button.jsx
Created November 18, 2016 20:40
Core UI Button Example using CSS Modules
import React from "react";
import classNames from "classnames";
import styles from "./styles";
const Button = (props) => {
const { className, children, theme, tag, ...rest } = props;
const CustomTag = `${tag}`;
return (
<CustomTag { ...rest } className={ classNames(styles.root, theme, className) }>
@carl0zen
carl0zen / some-container.jsx
Created November 18, 2016 20:44
Example of how to consume a Core UI Button component
import React from "react"
import Button from "components/core/button"
const = Component = () => <Button theme={ Button.theme.secondary }>Some Button</Button>
export default Component