Skip to content

Instantly share code, notes, and snippets.

@jamiebuilds

jamiebuilds/deprecated.jsx

Created March 10, 2017 05:00
Show Gist options
  • Save jamiebuilds/1caedc42119cc4e493493b1632dc619e to your computer and use it in GitHub Desktop.
Save jamiebuilds/1caedc42119cc4e493493b1632dc619e to your computer and use it in GitHub Desktop.
Download ZIP
React PropTypes additions
Raw
deprecated.jsx
import React, {PropTypes} from 'react';
class MyComponent extends React.Component {
static propTypes = {
foo: PropTypes.string,
bar: PropTypes.number.deprecated("Use props.foo instead of props.bar"),
});
}
<MyComponent foo="test"/>; // Works!
<MyComponent bar={3.14}/>; // Deprecation Warning: Use props.foo instead of props.bar (MyComponent)
Raw
exact-props.jsx
import React, {PropTypes} from 'react';
class MyComponent extends React.Component {
static propTypes = PropTypes.exact({
foo: PropTypes.string,
bar: PropTypes.number,
});
}
<MyComponent foo="test" bar={42}/>; // Works!
<MyComponent foo="test" bar={42} bat={true}/>; // Error! Prop "bat" found in exact props.
// Or using Flow... (https://flowtype.org/)
class MyComponent extends React.Component {
props: {|
foo?: string,
bar?: number
|};
}
Raw
exact.jsx
import React, {PropTypes} from 'react';
class MyComponent extends React.Component {
static propTypes = {
foo: PropTypes.string,
bar: PropTypes.shape({
baz: PropTypes.number
}).exact
};
}
<MyComponent foo="test" bar={{ baz: 42 }}/>; // Works!
<MyComponent foo="test" bar={{ baz: 42, bat: 3.14 }}/>; // Error! Property "bat" found in exact object.
// Or using Flow... (https://flowtype.org/)
class MyComponent extends React.Component {
props: {
foo: string,
bar: {|
baz: number
|}
};
}
@banderson
Copy link

🙏

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