https://github.com/henribeck/react-get-not-declared-props

A function to get all props that were passed to a react component which are not specified as a prop type
https://github.com/henribeck/react-get-not-declared-props

prop-types props react reactjs utils

Last synced: 10 months ago
JSON representation

A function to get all props that were passed to a react component which are not specified as a prop type

• Host: GitHub
• URL: https://github.com/henribeck/react-get-not-declared-props
• Owner: HenriBeck
• License: mit
• Created: 2017-07-01T10:17:47.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2019-03-28T23:56:30.000Z (about 7 years ago)
• Last Synced: 2025-08-11T22:32:40.029Z (10 months ago)
• Topics: prop-types, props, react, reactjs, utils
• Language: TypeScript
• Homepage:
• Size: 576 KB
• Stars: 8
• Watchers: 2
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-get-not-declared-props

![npm](https://img.shields.io/npm/v/react-get-not-declared-props.svg) ![CircleCI](https://img.shields.io/circleci/project/github/HenriBeck/react-get-not-declared-props.svg) ![Dev Deps](https://img.shields.io/david/dev/HenriBeck/react-get-not-declared-props.svg)

A dependencies free utility package for getting all extra passed props to an component.

### Installation

> yarn add react-get-not-declared-props

### Documentation

```js

import getNotDeclaredProps from 'react';

const additionalProps = getNotDeclaredProps(props, component, additionalProps);

```

This function takes three arguments:

- props: The props object.

- component: The component where the propTypes are defined on.

- additionalProps: An array of strings which should be omitted aswell from the return object. This argument is optional.

### Tradeoffs

##### The props:

- Improves the Developer Experience for not duplicating the props. One time for the propTypes and a second time for the render method when destructuring. This reduces the risk of mistakes.

##### The cons:

- The prop types can't be stripped in production without unknown side effects. This means that the bundle will be slightly larger.

### Example

```js

import React from 'react';

import PropTypes from 'prop-types';

import getNotDeclaredProps from 'react-get-not-declared-props';

class Button extends React.Component {

  static propTypes = {

    children: PropTypes.node,

    onPress: PropTypes.func,

  };

  handleClick = () => {

    this.props.onPress();

  };

  render() {

    return (

      


        {this.props.children}

      

    );

  }

}

```