npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-proptypes-generate

v1.7.6

Published

Auto generate react's propTypes

Downloads

1,299

Readme

react-proptypes-generate npm version

This is the VS Code's extension that automatically generates PropTypes code for React components, like ReactPropTypes in the Jetbrains's Platform. Also a command line tool, you don’t have to be limited to use in vscode. If you want fully automatic PropTypes generation, You can also use with lint-staged in your project.

Installation

VS Code

Search react-proptypes-generate in Marketplace and install it.

Command Line

If you want to use it directly on the command line, you can install cli by npm install.

npm install react-proptypes-generate -g

Project with lint-staged

    npm install --save-dev react-proptypes-generate lint-staged husky
    or
    yarn add react-proptypes-generate lint-staged husky -D

Usage

VS Code

  1. Select your Component's name
  2. Press command + . (Windows is Ctrl + .) show Code Actions and select PropTypesGenerate, or press shift + command + alt + P (Windows is shift + ctrl + alt + P) in the macOS
  3. Input propType to replace default type

img

Command Line

  1. rpg-cli -h show Help
  2. rpg-cli <JsFilePath> <ComponentName> to generate PropTypes
  3. rpg-cli config <JsonFilePath> to config generated Settings
  4. rpg-cli project <DirPath> to batch generated PropTypes for Project
  5. rpg-cli fix <files...> to batch generated PropTypes for many files

If you want ian to always use the latest version, you can use npx to instead of rpg-cli, like:

npx react-proptypes-generate -h
npx react-proptypes-generate ./examples/index.jsx Test
npx react-proptypes-generate setting.json
npx react-proptypes-generate project ./examples/
npx react-proptypes-generate fix index.jsx index2.jsx src/index3.js

If you want to every project have different config, you can create a json file named rpg.config.json and put it in root folder. rpg.config.json examples:

{
  "autoImport": "ES6",
  "codeStyle": "default",
  "noMergeOld": false,
  "mergeOldIfExist": true,
  "noShape": false,
  "tabWidth": 2,
  "quote": "double",
  "trailingComma": false,
  "semicolon": true,
  "arrayLike": true,
  "isRequired": false,
  "include": [
    "src/**/*"  // support glob
  ],
  "exclude": [
    "node_modules"
  ]
}

Project with lint-staged

edit package.json file

Config Git precommit hooks

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint-staged"
    }
  }
}

Config lint-staged, like:

{
    "lint-staged": {
        "**/*.{js,jsx,ts,tsx}": [
          "rpg-cli fix"
        ]
    }
}

TypeScript Need to Know

Because of the ast parser is flow-parser, so TypeScript sometimes generates strange types.

Already known Case

  • use as in the props's ES6 destruct, will generate redundant error types, like:
  let { age = 0 as number, students = [] } = props;
  // will generated
  Test.propTypes = {
     number: PropTypes.any,
     age: PropTypes.number,
     students: PropTypes.array
  }
  • Not Support convert Typescript’s type to PropType, like:
    let age:number = props.age
    // will generated
    Test.propTypes = {
       age: PropTypes.any,
    }

Examples case

import React from 'react'
function Test(props) {
  let { school: schoolAlias = "schoolName", info = { name: 2 }, year = 33 , onClick } = props;
  return <div onClick={() => onClick()} />
}
//will generate 
Test.propTypes = {
  info: PropTypes.shape({
    name: PropTypes.number
  }),
  onClick: PropTypes.func,
  school: PropTypes.string,
  year: PropTypes.number
} 

Special case

To prevent the array type may be prejudged to shape type, you should set a default value.

import React from 'react'
function Test(props) {
  let { students = [] } = props;
  let length = students.length;
  return <div/>
}
//will generate 
Test.propTypes = {
  students: PropTypes.array
} 

Keep PropTypes's Comments

If you want to keep PropTypes's comments, you must put the comments in the every PropTypes's end, like:

Test.propTypes = {
  students: PropTypes.array, // students
  teacher: PropTypes.shape({
     name: PropTypes.string, // teacher 's name
  }) // teacher
} 

Extension Settings

This extension contributes the following settings:

  • propTypes.autoImport: Auto import or require PropTypes module(disabled|commonJS|ES6)
  • propTypes.codeStyle: PropTypes Generate Style(default|class)
  • propTypes.tabWidth: Number of spaces the pretty-printer should use per tab for indentation (number)
  • propTypes.quote: Override the quotes used in string literals(single|double|auto|null)
  • propTypes.trailingComma: Controls the printing of trailing commas in object literals, array expressions and function parameters(boolean)
  • propTypes.semicolon: If true, there will be a semicolon after PropType statement
  • propTypes.afterFormat: If true, after generate propTypes, trigger vscode's formatting for PropTypes(boolean)
  • propTypes.noMergeOld: Defaults is merge old PropTypes, if true, will generate new PropTypes(boolean)
  • propTypes.mergeOldIfExist: If true, old PropTypes different with new PropTypes will be deleted, only used when noMergeOld is false(boolean)
  • propTypes.noShape: Defaults is generate shape type, if true, will generate object type(boolean)
  • propTypes.arrayLike: If true, some shape type which is similar to Array will be set array type instead(boolean)
  • isRequired: If true, all PropTypes is will be set to isRequired(boolean)

Command Line Settings

Command Line can config the following settings:

  • autoImport: Auto import or require PropTypes module(disabled|commonJS|ES6)
  • codeStyle: PropTypes Generate Style(default|class)
  • tabWidth: Number of spaces the pretty-printer should use per tab for indentation (number)
  • quote: Override the quotes used in string literals(single|double|auto|null)
  • trailingComma: Controls the printing of trailing commas in object literals, array expressions and function parameters(boolean)
  • semicolon: If true, there will be a semicolon after PropType statement
  • noMergeOld: Defaults is merge old PropTypes, if true, will generate new PropTypes(boolean)
  • mergeOldIfExist: If true, old PropTypes different with new PropTypes will be deleted, only used when noMergeOld is false(boolean)
  • noShape: Defaults is generate shape type, if true, will generate object type(boolean)
  • arrayLike: If true, some shape type which is similar to Array will be set array type instead(boolean)
  • isRequired: If true, all PropTypes is will be set to isRequired(boolean)
  • include: Match need generated files, only used in fix and project(array)
  • exclude: Match node need generated files, only used in fix and project(array)

CHANGELOG

Look it