Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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 2 months 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 (about 6 years ago)
Default Branch: master
Last Pushed: 2024-04-05T21:42:41.000Z (9 months ago)
Last Synced: 2024-10-30T02:56:23.079Z (3 months 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.