Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pure, stateless, type-checked React components with Immutable.js and Flow
/* @flow */
var React = require("react")
var Immutable = require("immutable")
// In order to use any type as props, including Immutable objects, we
// wrap our prop type as the sole "data" key passed as props.
type Component<P> = ReactClass<{},{ data: P },{}>
type Element = ReactElement<any, any, any>
// Our componenets are truly a function of props, and immutability is
// assumed. This discipline is a feature, not a bug.
function component<P>(render: (props: P) => Element): Component<P> {
return (React.createClass({
shouldComponentUpdate(props) {
return !Immutable.is(this.props.data, props.data)
},
render() {
return render((this.props.data : any))
}
}) : any)
}
// Defining components couldn't be simpler.
var Example: Component<string> = component((foo) => {
return <span>{foo}</span>
})
// In order to use JSX, we need to pass our props as `data`, but flow
// will still type check this for us.
var foo = <Example data={"bar"} />
@nmn

This comment has been minimized.

Copy link

@nmn nmn commented Apr 19, 2015

good stuff.

@kolman

This comment has been minimized.

Copy link

@kolman kolman commented Apr 21, 2015

How would you pass callbacks?

@railsnerd

This comment has been minimized.

Copy link

@railsnerd railsnerd commented Apr 22, 2015

Ah yeah callbacks scratches head

@samwgoldman

This comment has been minimized.

Copy link
Owner Author

@samwgoldman samwgoldman commented Apr 22, 2015

@kolman @railsnerd I don't understand the question. You just pass the callback as props. Flow can type functions, too.

@kahwee

This comment has been minimized.

Copy link

@kahwee kahwee commented Apr 25, 2015

Is this in Typescript?

How did your props in React become Immutable objects? Is this an automatic thing?

Thanks for this example!

@rclai

This comment has been minimized.

Copy link

@rclai rclai commented Feb 4, 2016

@kahwee you have to pass them as Immutable objects already.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment