Skip to content
Fluent prop validation for Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci fix: Add missing type definition for oneOf Jan 22, 2019
src
test
types
.babelrc fix: Add babel transform plugin to remove prop-types Jan 19, 2019
.editorconfig
.eslintignore
.gitattributes chore: refactor directory structure Nov 11, 2017
.gitignore chore: Use pnpm and test types Feb 10, 2019
CHANGELOG.md chore(release): 0.6.1 Feb 22, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Mar 3, 2018
CONTRIBUTING.md
LICENSE
README.md
jest.config.js
jsconfig.json chore: Use pnpm and test types Feb 10, 2019
logo.png
logo.svg chore: Move logo Jan 18, 2019
package.json chore(release): 0.6.1 Feb 22, 2019
rollup.config.js fix: Add babel transform plugin to remove prop-types Jan 19, 2019

README.md

prop-types


vue2 NPM version NPM downloads CircleCI codecov

Introduction

Fluent prop validation for Vue that won't land in your production code.

Use rollup-plugin-replace or DefinePlugin to replace process.env.NODE_ENV with 'production'.
If you are using Vue CLI or Nuxt, it's already done for you.

Usage

Installation

npm install --save @znck/prop-types

Examples

import PropTypes from '@znck/prop-types'; // ES6
var PropTypes = require('@znck/prop-types'); // ES5 with npm

Make sure to add @znck/prop-types/remove to babel config.

// babel.config.js or .babelrc.js
...
  plugins: [
    '@znck/prop-types/remove'
  ]
...

Here is an example of using PropTypes with a Vue component, which also documents the different validators provided:

<script>
import PropTypes from 'prop-types';

export default {
  props: {
    // You can declare that a prop is a specific JS primitive. By default, these
    // are all optional.
    optionalArray: PropTypes.array,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,

    // You can also declare that a prop is an instance of a class. This uses
    // JS's instanceof operator.
    optionalMessage: PropTypes.instanceOf(Message),

    // You can ensure that your prop is limited to specific values by treating
    // it as an enum.
    optionalEnum: PropTypes.oneOf(['News', 'Photos']),

    // An object that could be one of many types
    optionalUnion: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.number,
      PropTypes.instanceOf(Message)
    ]),

    // An array of a certain type
    optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

    // An object with property values of a certain type
    optionalObjectOf: PropTypes.objectOf(PropTypes.number),

    // An object taking on a particular shape
    optionalObjectWithShape: PropTypes.shape({
      color: PropTypes.string,
      fontSize: PropTypes.number
    }),

    // You can chain any of the above with `isRequired` to make sure a warning
    // is shown if the prop isn't provided.
    requiredFunc: PropTypes.func.isRequired,

    // A value of any data type
    requiredAny: PropTypes.any.isRequired,

    // You can also supply a custom validator.
    customArrayProp: PropTypes.string.validate(value => value === 'foo'),
  }
}
</script>

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Author

prop-types © Rahul Kadyan, Released under the MIT License.
Authored and maintained by Rahul Kadyan with help from contributors (list).

znck.me · GitHub @Rahul Kadyan · Twitter @znck0

You can’t perform that action at this time.