0.0.3 • Published 5 years ago
react-props-generator v0.0.3
react-props-generator
Generate default props and fake props data base on React components's PropTypes
Installation
$ npm install react-props-generator --save-dev
Usage
Notice: Importing this library 'prop-types' before 'react-props-generator'
- Import dependence from the library.
import PropTypes from 'prop-types'
import initPropTypes, { defaultProps } from 'react-props-generator'
- Add decorators with your component
@initPropTypes(false)
class TestWithDefaultProps extends Component {
render () {
console.log(this.props)
return <div>
<h3>TestWithDefaultProps Component</h3>
{
Object.keys(defaultProps).map(key => {
return (
<div key={key}>
<span>{key}: </span>
<span>{typeof this.props[key] === 'object' ? this.props[key] : this.props[key].toString()}</span>
</div>
)
})
}
</div>
}
}
- Use the defaultProps in your component.
Example
git clone https://github.com/hicoldcat/react-props-generator.git
cd react-props-generator
npm install
npm run start
And you with see your Component and defaultProps in console.
API
initPropTypes
Only one arguments is needed if you Use Decorators
initPropTypes(congfig)
If can't support Decorators, Two arguments are needed.
initPropTypes(YourComponent, congfig)
congfig: An Boolean or Object type of config the generator.
- false: Default value. Use default value to gennerate props.
initPropTypes(false)
DefaultPropsValue['array'] = function (propName, propType, arg) {
return [];
};
DefaultPropsValue['bool'] = function (propName, propType, arg) {
return true;
};
DefaultPropsValue['func'] = function (propName, propType, arg) {
return function () {};
};
DefaultPropsValue['number'] = function (propName, propType, arg) {
return 1;
};
DefaultPropsValue['object'] = function (propName, propType, arg) {
return {};
};
DefaultPropsValue['string'] = function (propName, propType, arg) {
return '';
};
DefaultPropsValue['symbol'] = function (propName, propType, arg) {
return Symbol('');
};
DefaultPropsValue['element'] = function (propName, propType, arg) {
return React.createElement('div');
};
DefaultPropsValue['node'] = function (propName, propType, arg) {
return DefaultPropsValue['element'](propName, propType, arg);
};
DefaultPropsValue['any'] = function (propName, propType, arg) {
return DefaultPropsValue['string'](propName, propType, arg);
};
DefaultPropsValue['oneOf'] = function (propName, propType, arg) {
return arg[0] ? arg[0] : null;
};
DefaultPropsValue['arrayOf'] = function (propName, propType, arg) {
return arg.proptype ? [DefaultPropsValue[arg.proptype](propName, propType, arg)] : [];
};
DefaultPropsValue['objectOf'] = function (propName, propType, arg) {
return arg.proptype ? {
key: DefaultPropsValue[arg.proptype](propName, propType, arg)
} : {};
};
DefaultPropsValue['oneOfType'] = function (propName, propType, arg) {
return arg[0] && arg[0].proptype ? DefaultPropsValue[arg[0].proptype](propName, propType, arg) : DefaultPropsValue['any'](propName, propType, arg);
};
DefaultPropsValue['instanceOf'] = function (propName, propType, Arg) {
return Arg ? new Arg() : null;
};
DefaultPropsValue['shape'] = function (propName, propType, arg, {
configOptions
}) {
return arg ? propsGenerator(undefined, arg, configOptions) : {};
};
DefaultPropsValue['exact'] = function (propName, propType, arg, source) {
return DefaultPropsValue['shape'](propName, propType, arg, source);
};
- true: Fake data.
initPropTypes(true)
FakePropsValue['array'] = function (propName, propType, arg) {
return Mock.mock({
'array|1-10': ['Mock.js']
})['array'];
};
FakePropsValue['bool'] = function (propName, propType, arg) {
return Mock.mock({
'boolean|1': true
})['boolean'];
};
FakePropsValue['func'] = function (propName, propType, arg) {
return function () {};
};
FakePropsValue['number'] = function (propName, propType, arg) {
return Mock.mock({
'number|+1': 202
})['number'];
};
FakePropsValue['object'] = function (propName, propType, arg) {
return {};
};
FakePropsValue['string'] = function (propName, propType, arg) {
return Mock.mock({
'string|1-10': '★'
})['string'];
};
FakePropsValue['symbol'] = function (propName, propType, arg) {
return Symbol('');
};
FakePropsValue['element'] = function (propName, propType, arg) {
return React.createElement('div');
}; // 默认使用element来作为node默认值
FakePropsValue['node'] = function (propName, propType, arg) {
return FakePropsValue['element'](propName, propType, arg);
}; // 默认使用string来作为any默认值
FakePropsValue['any'] = function (propName, propType, arg) {
return FakePropsValue['string'](propName, propType, arg);
};
FakePropsValue['oneOf'] = function (propName, propType, arg) {
return arg[0] ? arg[0] : null;
};
FakePropsValue['arrayOf'] = function (propName, propType, arg) {
return arg.proptype ? [FakePropsValue[arg.proptype](propName, propType, arg)] : [];
};
FakePropsValue['objectOf'] = function (propName, propType, arg) {
return arg.proptype ? {
key: FakePropsValue[arg.proptype](propName, propType, arg)
} : {};
};
FakePropsValue['oneOfType'] = function (propName, propType, arg) {
return arg[0] && arg[0].proptype ? FakePropsValue[arg[0].proptype](propName, propType, arg) : FakePropsValue['any'](propName, propType, arg);
};
FakePropsValue['instanceOf'] = function (propName, propType, Arg) {
return Arg ? new Arg() : null;
};
FakePropsValue['shape'] = function (propName, propType, arg, {
configOptions
}) {
return arg ? propsGenerator(undefined, arg, configOptions) : {};
}; // 默认使用shape来生成exact
FakePropsValue['exact'] = function (propName, propType, arg, source) {
return FakePropsValue['shape'](propName, propType, arg, source);
};
- {}: Custom config. Depend on you config
initPropTypes({
array: function (propName, propType, arg) {
return [12,34,56]
},
number: function (propName, propType, arg) {
return 999
},
element: function (propName, propType, arg) {
return <span>hello element</span>
},
})
If you not defined, Use default props to instead.
defaultProps
Return the default props values of generate.