Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to declare style in propTypes?

With the forbid-prop-types rule enabled, eslint forbids me from using style: React.PropTypes.object, and using shape is suggested.

But is it really necessary to define all the available properties there for this purpose like this?

DEMO.propTypes = {     style: React.PropTypes.shape({         color: React.PropTypes.string,         fontSize: React.PropTypes.number,         ...     }) }; 

Too much definition code!

like image 656
Howard Avatar asked Jan 06 '16 05:01

Howard


People also ask

How do you define an object in PropTypes?

propTypes = { //// key is the name of the prop and // value is the PropType } export default Count; PropTypes are also objects with a key and a value pair where the 'key' is the name of the prop while the value represents the type or class by which they are defined.

How do I use TypeScript PropTypes?

You can generate PropTypes from TypeScript type definitions using babel-plugin-typescript-to-proptypes . When you specify types for your props, the plugin converts those type definitions to PropTypes definitions. It will be compiled accordingly, thereby giving your React application type-checking powers during runtime.

How do you use PropTypes in a functional component React?

Using PropTypes in React PropTypes is React's internal mechanism for adding type checking to components. React components use a special property named propTypes to set up type checking. When props are passed to a React component, they are checked against the type definitions configured in the propTypes property.

Can we use PropTypes in functional component?

Firstly, npm install / yarn add the prop-types package if you haven't already. Then, add your propTypes (and defaultProps too if required) after the stateless functional component has been defined, before you export it.


Video Answer


2 Answers

React Native now contains ViewPropTypes, which will replace View.propTypes.style. Example of usage:

import { ViewPropTypes } from 'react-native';  MyComponent.propTypes = {   style: ViewPropTypes.style }; 
like image 185
NiFi Avatar answered Oct 07 '22 17:10

NiFi


View.propTypes.style 

or

Text.propTypes.style 

It would look like this:

DEMO.propTypes = {     style: Text.propTypes.style,     ... }; 

https://facebook.github.io/react-native/releases/0.21/docs/style.html#pass-styles-around

like image 41
tiagob Avatar answered Oct 07 '22 16:10

tiagob