Decorate React components with static properties
npm install react-staticsDecorate React components with static properties
- Summary
- Usage
- Standard
- Composed
- Development
When working with stateless functional components, or overriding default values on decorated components, applying statics can feel a bit boilerplate-y. This decorator centralizes the static property assignment, and allows for easy decorated composition.
#### Standard
``javascript
import React from "react";
import statics from "react-statics";
const App = ({ foo }, { bar }) => (
export default statics({
contextTypes: {
bar: PropTypes.node.isRequired
},
displayName: "MySpecialApp",
propTypes: {
foo: PropTypes.string.isRequired
}
})(App);
`
#### Composed
`javascript
import React from "react";
import { translate } from "react-i18next";
import { connect } from "react-redux";
import statics from "react-statics";
import { compose } from "redux";
const App = ({ foo }, { bar }) => (
export default compose(
statics({
contextTypes: {
bar: PropTypes.node.isRequired
},
displayName: "MySpecialApp",
propTypes: {
foo: PropTypes.string.isRequired
}
}),
translate(["namespace"]),
connect(({ reducer }) => reducer)
)(App);
`
NOTE: To ensure the values passed override any assigned by other composed decorators, place statics last to execute in the composition chain.
Standard stuff, clone the repo and npm install dependencies. The npm scripts available:
- build => run rollup to build development dist filesclean
- => run clean:dist, clean:es, and clean:lib
- => remove all existing files in the dist folderclean:es
- => remove all existing files in the es folderclean:lib
- => remove all existing files in the lib folderdev
- => run webpack dev server to run example app / playgrounddist
- => runs clean:dist and build
- => run ESLint against all files in the src folderlint:fix
- => run ESLint against all files in the src folder, fixing anything it can automaticallyprepublish
- => runs prepublish:compile when publishingprepublish:compile
- => run lint, test:coverage, transpile:lib, transpile:es, and dist
- => run AVA test functions with NODE_ENV=test
- => run test but with nyc for coverage checkertest:watch
- => run test, but with persistent watchertranspile:lib
- => run babel against all files in src to create files in lib
- => run babel against all files in src to create files in es, preserving ES2015 modules (forpkg.module`)