Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

redux-needs

Package Overview
Dependencies
Maintainers
4
Versions
9
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

redux-needs - npm Package Compare versions

Comparing version 1.0.0-beta.4 to 1.0.0

.babelrc

43

package.json
{
"name": "redux-needs",
"version": "1.0.0-beta.4",
"version": "1.0.0",
"description": "Wrapping everyday data to your containers in need",
"main": "index.js",
"main": "lib/index.js",
"repository": "git@github.com:LUKKIEN/redux-needs.git",

@@ -31,2 +31,18 @@ "contributors": [

},
"scripts": {
"build": "yarn run clean && babel src --out-dir lib && cp LICENSE README.md ./lib",
"clean": "rimraf lib",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"prepush": "yarn test && yarn lint",
"release": "release",
"release:alpha": "release --preid alpha",
"release:next": "release --preid beta --tag next",
"test": "jest",
"test:ci": "yarn run test && codecov"
},
"release-script": {
"altPkgRootFolder": "lib",
"defaultDryRun": "true"
},
"dependencies": {

@@ -42,3 +58,26 @@ "lodash.get": "4.4.2",

"redux": "^3.7.x"
},
"devDependencies": {
"babel-cli": "^6.24.1",
"babel-eslint": "^7.2.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"codecov": "^2.2.0",
"enzyme": "^2.8.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"husky": "^0.14.3",
"jest": "^20.0.4",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-test-renderer": "^15.6.1",
"redux": "^3.7.0",
"redux-mock-store": "^1.2.3",
"release-script": "^1.0.2"
}
}
# redux-needs · [![Build Status](https://travis-ci.org/LUKKIEN/redux-needs.svg?branch=master)](https://travis-ci.org/LUKKIEN/redux-needs) [![codecov](https://codecov.io/gh/LUKKIEN/redux-needs/branch/master/graph/badge.svg)](https://codecov.io/gh/LUKKIEN/redux-needs)
> 🎁 Wrapping everyday data to your containers in need 🎁
Bind actions to changes in your Redux state based on the needs of your active
Redux components.
[Usage](#usage) |
[API](#api) |
[Installation](#installation) |
[License](#license)
## Usage
### Simple binding
Dispatch the `ping` action when `MyComponent` is mounted.
```js
import React from 'react';
import needs from 'redux-needs';
const ping = () => ({
type: 'PING',
});
const MyComponent = () => (
<h1>Hello, world!</h1>
);
export default needs([ ping ])(MyComponent);
```
### Complex binding
Dispatch the `ping` action when `MyComponent` is mounted and again every
time the value of the `name` property changes.
```js
import React from 'react';
import needs from 'redux-needs';
const ping = () => ({
type: 'PING',
});
const MyComponent = ({ name }) => (
<h1>Hello, { name }!</h1>
);
MyComponent.defaultProps = {
name: 'world',
};
export default needs({
props: [ 'name' ],
action: ping,
})(MyComponent);
```
## API
### const binder = needs(bindings);
Returns a new binder method which, when called with a component, will return the
component wrapped with the configured bindings. This method is compatible with
the [Redux compose](http://redux.js.org/docs/api/compose.html#composefunctions)
method.
- `bindings` (required) - an array containing [bindings](#bindings)
### Bindings
#### Simple bindings
Simple bindings will trigger an action only once: when the component is mounted.
To add a simple binding just add an [action creator](http://redux.js.org/docs/basics/Actions.html#action-creators)
to the array of bindings. When the component is mounted the action creator will
be called with `this.props` and the resulting action will be dispatched.
Go to [the example](#simple-binding).
#### Complex bindings
Complex bindings will trigger an action when the component is mounted and again
when one or more of the bound properties change.
To add a complex binding add an object to array of bindings with two properties:
* `action` - the [action creator](http://redux.js.org/docs/basics/Actions.html#action-creators)
* `props` - an array of strings describing the properties of the component to
watch
The `prop` field can contain nested properties. For example; given the following
object, the `c` property with a value of `3` can be bound to using `a[0].b.c`:
```js
{
"a": [
{ "b": { "c": 3 } },
{ "b": { "c": 4 } }
],
"d": 5
};
```
When binding to specific values, the action creator will be called with a subset
of `this.props` matching the bound property paths. In the case of the previous
example, this would mean the action creator would be called with the follwing
object:
```js
{
"a": [
{ "b": { "c": 3 }
]
}
```
**Note:** the action creators will sometimes be called even if the action will
not be dispatched. As this could potentially be every time `componentWillUpdate`
is called on your component, your action creators should be lightweigth methods.
Go to [the example](#complex-binding).
## Installation
With [npm](https://npmjs.org/) installed, run
```
$ npm install redux-needs
```
Or with [yarn](https://yarnpkg.com/) installed, run
```
$ yarn add redux-needs
```
## Peer dependencies
This library uses the following peer dependencies, which will probably already
be included in your project if it's uses Redux and React:
* _react_: 15.5.x
* _react-redux_: 5.x.x
* _redux_: 3.7.x
## License
The `redux-needs` package is distributed under the 3-Clause BSD License.
Check the [LICENSE](LICENSE) file for details.
create-component.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc