https://github.com/helabenkhalfallah/json-to-react-proptypes
Convert Json to React Proptypes (propTypes & defaultProps with nested object structure) (J2P)
https://github.com/helabenkhalfallah/json-to-react-proptypes
Last synced: 10 days ago
JSON representation
Convert Json to React Proptypes (propTypes & defaultProps with nested object structure) (J2P)
- Host: GitHub
- URL: https://github.com/helabenkhalfallah/json-to-react-proptypes
- Owner: helabenkhalfallah
- Created: 2020-04-14T20:07:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T19:34:27.000Z (over 2 years ago)
- Last Synced: 2025-04-12T23:54:26.582Z (10 days ago)
- Language: JavaScript
- Homepage: https://helabenkhalfallah.github.io/json-to-react-proptypes/
- Size: 5.16 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Json to React PropTypes (J2P)
Convert Json to React PropTypes (propTypes & defaultProps with nested object structure)
## How to use ?
https://helabenkhalfallah.github.io/json-to-react-proptypes/
## Input example
```json
{
"users": [{
"user": {
"name": "XXX",
"adresse": {
"zip": "94120",
"coordinate": {
"latitude": [1, 4],
"longitude": ["2", "3"],
"diameter": 3
},
"street": "Fontenay",
"values": [1, 2, 3]
}
},
"values": [1, 2, 3],
"school": "azerty",
"note": 12,
"isConnected": true,
"adresse": {
"zip": "94120",
"coordinate": {
"latitude": [1, 4],
"longitude": ["2", "3"],
"diameter": 3
},
"street": "Fontenay",
"values": [1, 2, 3]
}
}],
"local": {
"lang": "fr"
},
"config": [{
"env": "Test",
"local": "fr"
}],
"date": "14/04/202",
"numberOfConnection": 2900,
"isEmpty": false
}
```
## Output
```js
import PropTypes from 'prop-types'
// propsType (validation)
MyComponent.propTypes = {
users: PropTypes.arrayOf(
PropTypes.shape({
user: PropTypes.shape({
name: PropTypes.string,
adresse: PropTypes.shape({
zip: PropTypes.string,
coordinate: PropTypes.shape({
latitude: PropTypes.arrayOf(
PropTypes.number
),
longitude: PropTypes.arrayOf(
PropTypes.string
),
diameter: PropTypes.number
}),
street: PropTypes.string,
values: PropTypes.arrayOf(
PropTypes.number
)
}),
}),
values: PropTypes.arrayOf(
PropTypes.number
),
school: PropTypes.string,
note: PropTypes.number,
isConnected: PropTypes.bool,
adresse: PropTypes.shape({
zip: PropTypes.string,
coordinate: PropTypes.shape({
latitude: PropTypes.arrayOf(
PropTypes.number
),
longitude: PropTypes.arrayOf(
PropTypes.string
),
diameter: PropTypes.number
}),
street: PropTypes.string,
values: PropTypes.arrayOf(
PropTypes.number
)
}), }),
),
local: PropTypes.shape({
lang: PropTypes.string
}),
config: PropTypes.arrayOf(
PropTypes.shape({
env: PropTypes.string,
local: PropTypes.string
}),
),
date: PropTypes.string,
numberOfConnection: PropTypes.number,
isEmpty: PropTypes.bool
}
// default props
MyComponent.defaultProps = {
users: [],
local: {
lang: null
},
config: [],
date: null,
numberOfConnection: 0,
isEmpty: false
}
```
