Skip to content

Instantly share code, notes, and snippets.

@kof
kof / StyledButton.js
Last active Mar 22, 2017
Styled Primitive Components with JSS
View StyledButton.js
import {styled} from 'react-jss-components'
const RedButton = styled('button', {
color: 'red'
})
<RedButton>Click me</RedButton>
@kof
kof / react-inline-styles.md
Last active Apr 5, 2016
React inline style rendering
View react-inline-styles.md

Rendering a style update

  1. Unset previous props.

Iterate over lastStyle and copy keys into styleUpdates with empty string as a value in order to "unset" them when they are missing in the next style version.

  1. Find modified props.

Iterate over new style and copy modified keys only into styleUpdates.

@kof
kof / action-creator-vs-reducer.md
Last active Jan 18, 2020
Action creator vs. reducer
View action-creator-vs-reducer.md

When should you use action creator and when reducer?

Action creator

  • you need to have side effects
  • you need to read from store to decide what to do
  • you need to dispatch more than one action
  • action produced by action creator needs to contain all the data reducer can need to shape the components state

Reducer

  • should not have any side effects
View jss-es6-example-1.js
export default {
input: {
display: 'inline-block',
width: '100%',
height: '100%',
lineHeight: 0
},
browser: {
position: 'absolute',
width: '100%',
@kof
kof / decorated-component.js
Last active Oct 10, 2015
React component without extends.
View decorated-component.js
import {component} from 'react'
@component
export default class MyComponent {
componentDidMount() {
}
render() {
}
}
@kof
kof / Section.js
Last active Aug 29, 2015
Example of a react component with jss
View Section.js
'use strict'
import React from 'react'
import useSheet from 'react-jss'
import sectionStyle from './sectionStyle'
import Item from './Item'
/**
* One list section which has a title and list items.
*/
@kof
kof / fastClickSurfacePatch.js
Created Jul 15, 2014
Fixes issue with FastClick
View fastClickSurfacePatch.js
define(function(require, exports, module) {
var Surface = require('famous/core/Surface')
// https://github.com/Famous/core/issues/37
Surface.prototype.emit = function(type, event) {
if (event && !event.origin) event.origin = this;
return this.eventHandler.emit(type, event);
}
})
@kof
kof / BaseTransition.js
Created Jun 30, 2014
Transitions class to apply to RenderController
View BaseTransition.js
define(function(require, exports, module) {
'use strict'
var CachedMap = require('famous/transitions/CachedMap')
var Transform = require('famous/core/Transform')
var _ = require('underscore')
function BaseTransition(options) {
var o = this.options = _.extend({}, this.constructor.DEFAULT_OPTIONS, options)
var spec = this.spec = {}
@kof
kof / app.js
Created Jun 25, 2014
Famo.us app init
View app.js
exports.ready = new Promise(function(fulfill, reject) {
var isResized, isDomReady
var isDeviceReady = !window.cordova
context.on('resize', function() {
isResized = true
resolve()
})
domready(function() {
@kof
kof / SomeView.js
Last active Aug 29, 2015
RenderController
View SomeView.js
SomeView.prototype.show = function() {
var prevAnimation = {
transition: {},
transform: {}
}
var thisAnimation = {
transition: {},
transform: {}
}
You can’t perform that action at this time.