open-index/open-npm huggingface dataset:
npm package: @redux-beacon/amplitude
Description: Amplitude integration for Redux
Latest version: 1.0.3

### Description

This is a redux-beacon plugin or 'target' for sending page views, events, and more to Amplitude.

### Documention & Examples

 - [Getting Started Guide (Redux)](https://rangle.gitbook.io/redux-beacon/getting-started-redux-users)
 - [Getting Started Guide (Ngrx)](https://rangle.gitbook.io/redux-beacon/getting-started-ngrx-users)
 - [Amplitude Target API & Installation](https://rangle.gitbook.io/redux-beacon/index/amplitude)
npm package: @redux-beacon/debounce-event
Description: Redux Beacon extension for debouncing events
Latest version: 1.0.2

# @redux-beacon/debounce-event

Use with [Redux Beacon](https://www.npmjs.com/package/redux-beacon) to limit the frequency of analytics events.

### Example

```js
import debounceEvent from '@redux-beacon/debounce-event';

// A normal event definition
const searchTerm = (action) => ({
  hitType: 'event',
  eventCategory: 'books',
  eventAction: 'search',
  eventLabel: action.payload
});

const eventsMap = {
  // Assume that SEARCH_TERM_ENTERED fires whenever a user types a character into
  // an input field.
  SEARCH_TERM_ENTERED: debounceEvent(1000, searchTerm)
  // The analytics event will only fire after 1s since the last entered character
};

// provide the events map when creating your middleware or meta reducer...
```
npm package: @redux-beacon/google-analytics
Description: Google Analytics integration for Redux
Latest version: 1.2.3

### Description

This is a redux-beacon plugin or 'target' for sending page views, events, and more to Google Analytics.

### Documention & Examples

 - [Getting Started Guide (Redux)](https://rangle.gitbook.io/redux-beacon/getting-started-redux-users)
 - [Getting Started Guide (Ngrx)](https://rangle.gitbook.io/redux-beacon/getting-started-ngrx-users)
 - [Google Analytics Target API & Installation](https://rangle.gitbook.io/redux-beacon/index/google-analytics)
npm package: @redux-beacon/google-analytics-gtag
Description: Google Analytics (gtag.js) integration for Redux
Latest version: 1.1.0

### Description

This is a redux-beacon plugin or 'target' for sending page views, events, and more to Google Analytics.

### Documention & Examples

 - [Getting Started Guide (Redux)](https://rangle.gitbook.io/redux-beacon/getting-started-redux-users)
 - [Getting Started Guide (Ngrx)](https://rangle.gitbook.io/redux-beacon/getting-started-ngrx-users)
 - [Google Analytics Target API & Installation](https://rangle.gitbook.io/redux-beacon/index/google-analytics-gtag)
npm package: @redux-beacon/segment
Description: Segment.io integration for Redux
Latest version: 1.1.0

### Description

This is a redux-beacon plugin or 'target' for sending page views, events, and more to [Segment](https://segment.com/).

### Documention & Examples

 - [Getting Started Guide (Redux)](https://rangle.gitbook.io/redux-beacon/getting-started-redux-users)
 - [Getting Started Guide (Ngrx)](https://rangle.gitbook.io/redux-beacon/getting-started-ngrx-users)
 - [Segment.io Target API & Installation](https://rangle.gitbook.io/redux-beacon/index/segment)
npm package: @redux-devtools/app
Description: Redux DevTools app
Author: Mihail Diordiev
Latest version: 8.0.0

# Redux DevTools monitor app

![Demo](https://raw.githubusercontent.com/zalmoxisus/remote-redux-devtools/master/demo.gif)

Web, Electron and Chrome app for monitoring [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools).

Also it's a react component you can use to build amazing monitor applications like:

- [redux-devtools-extension](https://github.com/zalmoxisus/redux-devtools-extension).
- [react-native-debugger](https://github.com/jhen0409/react-native-debugger) - Electron app, which already includes `remotedev-server`, `redux-devtools-app` and even React DevTools.
- [remote-redux-devtools-on-debugger](https://github.com/jhen0409/remote-redux-devtools-on-debugger) - Used in React Native debugger as a dock monitor.
- [atom-redux-devtools](https://github.com/zalmoxisus/atom-redux-devtools) - Used in Atom editor.
- [vscode-redux-devtools](https://github.com/jkzing/vscode-redux-devtools) - Used in Visual Studio Code.
- [intellij-redux-devtools](https://github.com/takanuva15/intellij-redux-devtools) - Used in IntelliJ IDEA.

### Usage

```js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Root } from '@redux-devtools/app';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Root />);
```

### Parameters

- `socketOptions` - _object_ used to specify predefined options for the connection:
  - `hostname` - _string_
  - `port` - _number or string_
  - `autoReconnect` - _boolean_
  - `secure` - _boolean_.
- `monitorOptions` - _object_ used to specify predefined monitor options:
  - `selected` - _string_ - which monitor is selected by default. One of the following values: `LogMonitor`, `InspectorMonitor`, `ChartMonitor`.
- `testTemplates` - _array_ of strings representing predefined test templates.
- `noSettings` - _boolean_ set to `true` in order to hide settings button and dialog.

### License

MIT
npm package: @redux-devtools/app-core
Description: Redux DevTools app core
Author: Mihail Diordiev
Latest version: 3.0.0

# Redux DevTools monitor app core

The core React component and Redux store for the Redux DevTools monitor app. It is split out to allow you to use it directly for transports other than the standard WebSocket one.

### Usage

```js
import { Provider } from 'react-redux';
import { Persistor } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import { App } from '@redux-devtools/app-core';
import { store, persistor } from "./yourStore";

export function Root() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor!}>
        <App />
      </PersistGate>
    </Provider>
  );
}
```

### License

MIT
npm package: @redux-devtools/extension
Description: Wrappers for Redux DevTools Extension.
Author: Mihail Diordiev
Latest version: 4.0.0

# Redux DevTools Extension's helper

[![Join the chat at https://gitter.im/zalmoxisus/redux-devtools-extension](https://badges.gitter.im/zalmoxisus/redux-devtools-extension.svg)](https://gitter.im/zalmoxisus/redux-devtools-extension?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## Usage

Install:

```
yarn add @redux-devtools/extension
```

and use like that:

```js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';

const store = createStore(
  reducer,
  composeWithDevTools(
    applyMiddleware(...middleware),
    // other store enhancers if any
  ),
);
```

or if needed to apply [extension’s options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md):

```js
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from '@redux-devtools/extension';

const composeEnhancers = composeWithDevTools({
  // Specify here name, actionsDenylist, actionsCreators and other options
});
const store = createStore(
  reducer,
  composeEnhancers(
    applyMiddleware(...middleware),
    // other store enhancers if any
  ),
);
```

There are just a [few lines of code](https://github.com/reduxjs/redux-devtools/blob/main/packages/redux-devtools-extension/src/index.ts). If you don’t want to allow the extension in production, just use `composeWithDevToolsDevelopmentOnly` instead of `composeWithDevTools`.

## License

MIT
npm package: @redux-devtools/inspector-monitor-trace-tab
Description: Submonitor for Redux DevTools inspector to show stack traces.
Author: Mark Erikson
Latest version: 5.0.0

# Redux DevTools Stack Trace Monitor

Submonitor for Redux DevTools inspector to show stack traces. Based on [`react-error-overlay`](https://github.com/facebook/create-react-app/tree/master/packages/react-error-overlay) and the contribution of [Mark Erikson](https://github.com/markerikson) in [the PR from `remotedev-app`](https://github.com/zalmoxisus/remotedev-app/pull/43/).

It's integrated in Redux DevTools browser extension. To use it separately with [`redux-devtools`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools) and [`redux-devtools-inspector-monitor`](https://github.com/reduxjs/redux-devtools/packages/redux-devtools-inspector-monitor) according to [Walkthrough](https://github.com/reduxjs/redux-devtools/blob/master/docs/Walkthrough.md):

##### `containers/DevTools.js`

```js
import React from 'react';
import { createDevTools } from '@redux-devtools/core';
import { InspectorMonitor } from '@redux-devtools/inspector-monitor';
import { TraceTab } from '@redux-devtools/inspector-monitor-trace-tab';

export default createDevTools(
  <InspectorMonitor
    tabs: defaultTabs => [...defaultTabs, { name: 'Trace', component: TraceTab }]
  />
);
```

##### `store/configureStore.js`

```js
// ...
const enhancer = compose(
  // ...
  DevTools.instrument({ trace: true }),
);
// ...
```

### License

MIT
npm package: @redux-devtools/serialize
Description: Serialize unserializable data and parse it back.
Author: Mihail Diordiev
Latest version: 1.0.0

# Serialize ImmutableJS data

### Installation

```
yarn add @redux-devtools/serialize
```

### Usage with ImmutableJS data structures

Just pass the Immutable library to our class:

```js
import Immutable from 'immutable';
import { immutable } from '@redux-devtools/serialize';
const { stringify, parse } = immutable(Immutable);

const data = Immutable.fromJS({ foo: 'bar', baz: { qux: 42 } });
const serialized = stringify(data);
console.log(serialized);
// {"data":{"foo":"bar","baz":{"data":{"qux":42},"__serializedType__":"ImmutableMap"}},"__serializedType__":"ImmutableMap"}
const parsed = parse(serialized);
console.log(Immutable.is(parsed, data));
// true
```

See [the tests](https://github.com/reduxjs/remote-devtools/blob/master/packages/remotedev-serialize/test/immutable.spec.js) for more examples of usage.

### Usage with ImmutableJS Record classes

To parse a Record class back, you need to specify a reference to it:

```js
import Immutable from 'immutable';
import { immutable } from '@redux-devtools/serialize';

const ABRecord = Immutable.Record({ a: 1, b: 2 });
const { stringify, parse } = immutable(Immutable, [ABRecord]);

const myRecord = new ABRecord({ b: 3 });
const serialized = stringify(myRecord);
console.log(serialized);
// {"data":{"a":1,"b":3},"__serializedType__":"ImmutableRecord","__serializedRef__":0}
const parsed = parse(serialized);
console.log(Immutable.is(parsed, myRecord));
// true
```

### Passing custom serialization functions

You can pass custom replacer and reviver functions to Serialize:

```js
import Immutable from 'immutable';
import { immutable } from '@redux-devtools/serialize';

function customReplacer(key, value, defaultReplacer) {
  if (value === 1) {
    return { data: 'one', __serializedType__: 'number' };
  }
  return defaultReplacer(key, value);
}

function customReviver(key, value, defaultReviver) {
  if (
    typeof value === 'object' &&
    value.__serializedType__ === 'number' &&
    value.data === 'one'
  ) {
    return 1;
  }
  return defaultReviver(key, value);
}

const { stringify, parse } = immutable(
  Immutable,
  null,
  customReplacer,
  customReviver,
);

const map = Immutable.Map({ a: 1, b: 2 });
const serialized = stringify(map);
console.log(serialized);
// {"data":{"a":{"data":"one","__serializedType__":"number"},"b":2},"__serializedType__":"ImmutableMap"}
const parsed = parse(serialized);
console.log(Immutable.is(parsed, map));
// true
```

### Supported

#### ImutableJS

- [x] Record
- [x] Range
- [x] Repeat
- [x] Map
- [x] OrderedMap
- [x] List
- [x] Set
- [x] OrderedSet
- [x] Seq
- [x] Stack

#### ES6

- [x] Symbol
- [x] Map
- [x] Set
- [ ] Typed Array

### License

MIT
npm package: @redux-devtools/slider-monitor
Description: A custom monitor for replaying Redux actions that works similarly to a video player
Author: Cale Newman
Latest version: 7.0.0

## Redux DevTools Slider Monitor

[![npm version](https://img.shields.io/npm/v/redux-slider-monitor.svg?style=flat-square)](https://www.npmjs.com/package/redux-slider-monitor)

A custom monitor for use with [Redux DevTools](https://github.com/gaearon/redux-devtools).

It uses a slider based on [react-slider](https://github.com/mpowaga/react-slider) to slide between different recorded actions. It also features play/pause/step-through, which is inspired by some very cool [Elm](http://elm-lang.org/) [examples](http://elm-lang.org/blog/time-travel-made-easy).

[Try out the demo!](https://calesce.github.io/redux-slider-monitor/?debug_session=123)

<image src="https://s3.amazonaws.com/f.cl.ly/items/1I3P222C3N2R1M2y1K3b/Screen%20Recording%202015-12-22%20at%2007.20%20PM.gif?v=1b6267e7" width='800'>

### Installation

`yarn add @redux-devtools/slider-monitor`

### Recommended Usage

Use with [`DockMonitor`](https://github.com/reduxjs/redux-devtools/tree/master/packages/redux-devtools-dock-monitor)

```javascript
<DockMonitor
  toggleVisibilityKey="ctrl-h"
  changePositionKey="ctrl-q"
  defaultPosition="bottom"
  defaultSize={0.15}
>
  <SliderMonitor keyboardEnabled />
</DockMonitor>
```

Dispatch some Redux actions. Use the slider to navigate between the state changes.

Click the play/pause buttons to watch the state changes over time, or step backward or forward in state time with the left/right arrow buttons. Change replay speeds with the `1x` button, and "Live" will replay actions with the same time intervals in which they originally were dispatched.

## Keyboard shortcuts

Pass the `keyboardEnabled` prop to use these shortcuts

`ctrl+j`: play/pause

`ctrl+[`: step backward

`ctrl+]`: step forward

### Running Examples

You can do this:

```
git clone https://github.com/reduxjs/redux-devtools.git
cd packages/redux-devtools-slider-monitor/examples/todomvc
yarn install
npm start
open http://localhost:3000
```

### License

MIT