https://github.com/tophat/with-immutable-props-to-js

:smiling_imp: A higher-order component for keeping Immutable objects outside your presentational components
https://github.com/tophat/with-immutable-props-to-js

immutable props react redux selectors

Last synced: about 1 year ago
JSON representation

:smiling_imp: A higher-order component for keeping Immutable objects outside your presentational components

• Host: GitHub
• URL: https://github.com/tophat/with-immutable-props-to-js
• Owner: tophat
• License: apache-2.0
• Created: 2018-11-19T16:51:50.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2024-04-05T21:42:41.000Z (about 2 years ago)
• Last Synced: 2024-10-30T02:56:23.079Z (over 1 year ago)
• Topics: immutable, props, react, redux, selectors
• Language: JavaScript
• Homepage: https://with-immutable-props-to-js.js.org
• Size: 2.85 MB
• Stars: 76
• Watchers: 6
• Forks: 6
• Open Issues: 32
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# with-immutable-props-to-js



[![npm](https://img.shields.io/npm/v/with-immutable-props-to-js.svg)](https://www.npmjs.com/package/with-immutable-props-to-js)

[![CICD](https://github.com/tophat/with-immutable-props-to-js/actions/workflows/main.yml/badge.svg)](https://github.com/tophat/with-immutable-props-to-js/actions/workflows/main.yml)

[![npm downloads](https://img.shields.io/npm/dm/with-immutable-props-to-js.svg)](https://npm-stat.com/charts.html?package=with-immutable-props-to-js)

[![codecov](https://codecov.io/gh/tophat/with-immutable-props-to-js/branch/master/graph/badge.svg)](https://codecov.io/gh/tophat/with-immutable-props-to-js)

[![Renovate

enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovatebot.com/)

[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat)](#contributors)

[![Discord](https://img.shields.io/discord/809577721751142410)](https://discord.gg/YhK3GFcZrk)

[![Maturity badge - level 3](https://img.shields.io/badge/Maturity-Level%203%20--%20Stable-green.svg)](https://github.com/tophat/getting-started/blob/master/scorecard.md)

A higher-order component for keeping Immutable objects outside your presentational components

## Installation

```

yarn add with-immutable-props-to-js

```

or

```

npm install with-immutable-props-to-js

```

This library also lists `react`, `react-dom`, and `immutable` as peer dependencies, so make sure they are installed in your project as well.

## Usage

```javascript

import withImmutablePropsToJS from 'with-immutable-props-to-js'

```

If you're not using ECMAScript modules:

```javascript

const withImmutablePropsToJS = require('with-immutable-props-to-js').default

```

Example:

```javascript

import React from 'react'

import { connect } from 'react-redux'

import withImmutablePropsToJS from 'with-immutable-props-to-js'

const MyDumbComponent = props => {

   // ...

   // props.objectProp is turned into a plain JavaScript object

   // props.arrayProp is turn into a plain JavaScript array

}

MyDumbComponent.propTypes = {

   objectProp: PropTypes.object,

   arrayProp: PropTypes.array,

}

const mapStateToProps = state => ({

   objectProp: mySelectorThatReturnsImmutableMap(state),

   arrayProp: mySelectorThatReturnsImmutableList(state),

})

export default connect(mapStateToProps)(withImmutablePropsToJS(MyDumbComponent))

```

## Motivation

You can read about the rationale for this higher-order component [here](https://tophat.github.io/with-immutable-props-to-js/docs/motivation).

## Contributors

For information on how to contribute to this project, check out the [contributing guide](./CONTRIBUTING.md).

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

  

    
Michael Rose
💻 📖 🚇

    
Brandon Baksh
🚇

    
greenkeeper[bot]
🚇

    
Jake Bolam
📖 🚇

    
Sanchit Gera
📖

    
Siavash Mahmoudian
🚇

    
monicamm95
🎨

  

  

    
Danilo Matamoros
💻

    
Roman Mahotskyi
🚇

    
Pablo Morra
💻 ⚠️

    
dependabot[bot]
🚇

    
jinwoo choi
💻

    
Marc Cataford
📖

    
Michael Chen
💻

  

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

## Credits

Special thanks to [Carol Skelly](https://github.com/iatek) for donating the 'tophat' GitHub organization.