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 commented Apr 19, 2015

good stuff.

@kolman

This comment has been minimized.

Copy link

kolman commented Apr 21, 2015

How would you pass callbacks?

@railsnerd

This comment has been minimized.

Copy link

railsnerd commented Apr 22, 2015

Ah yeah callbacks scratches head

@samwgoldman

This comment has been minimized.

Copy link
Owner Author

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 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 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
You can’t perform that action at this time.