open-index/open-npm huggingface dataset:
npm package: @rq/react-easy-router
Description: Easy and lightweight react router
Author: Oleg Pudeyev
Latest version: 3.2.2

# react-easy-router

A simple and lightweight alternative to `react-router`.

## Usage

```js
// Main routes file: routes.js
import user from 'modules/user/routes';
import catalog from 'modules/catalog/routes';

export default {
	...user,
	...catalog
};
```

```js
// Module route file: modules/user/routes.js

import * as Handlers from './handlers';
import { AppBase } from 'app';

export default {
    UserList: {path: '/user/list', component: Handlers.List, wrapper: AppBase},
    UserView: {path: '/user/:user_id', component: Handlers.View, wrapper: AppBase}
}
```

```js
// index file
import React from 'react';
import { render } from 'react-dom';
import { createHistory, useBasename } from 'history'
import routes from './routes';

// Redux store, optional
import store from './store';
import { Provider } from 'react-redux';

// Example for historyCallback
import * as actions from 'modules/core/actions/core';

const history = useBasename(createHistory)({
	basename: '/'
});

render((
    <Provider store={store}>
        <Router
            historyCallback={() => {
            	// do something when route changed
            	// Example:
            	store.dispatch(actions.didChangeRoute())
            }}
            history={history}
            notFound={notFound} // optional 404 handler, can be null
            routes={routes}/>
    </Provider>
), document.getElementById('app'));
```

Build url:
```js
import { Link } from 'react-easy-router';

...

<Link to="UserView" params={{user_id: 1}} className="user-link" {...props}>Text</Link>
```

Specify [url-pattern](https://github.com/snd/url-pattern) options for URL
matching:

```js


// Module route file: modules/user/routes.js

import * as Handlers from './handlers';
import { AppBase } from 'app';

export default {
    // Recognizes /user/ada.lovelace
    UserView: {path: '/user/:name', options: {segmentValueCharset: '.a-z'},
        component: Handlers.View, wrapper: AppBase},
}
```

## Changelog

### 3.2

- Replaced `componentWillMount` usage with constructor and
`componentWillReceiveProps` with `componentDidUpdate` for React 17 compatibility.
npm package: @rq/react-map-props
Description: Transform component props before they're passed to your component
Author: Jay Phelps
Latest version: 0.1.1

react-map-props
=========================

Allows you to have a single place to transform incoming props.

## Install

```bash
npm install --save react-map-props
```

## Usage

The `mapProps()` function accepts either an object hash containing transforms for only the properies you want, or you can provide a function that will accept all of the `props` at once and is expected to then return the desired `props`.

```js
@mapProps({
  message: value => value + ' world'
})

// or

@mapProps({
  props => ({
    ...props,
    message: value + ' world'
  })
})
```

You can apply `mapProps()` either as a decorator (if supported by your transpiler) or by just invoking it with the transforms and then calling the returned function with your Component.

#### As a decorator

```js
import React, { Component } from 'react';
import { mapProps } from 'react-map-props';

@mapProps({
  message: value => value + ' world'
})
export default
class Example1 extends Component {
  render() {
    // <div>hello world</div>
    return <div>{this.props.message}</div>;
  } 
}
```

#### As a function

```js
import React, { Component } from 'react';
import { mapProps } from 'react-map-props';

const Example = (props) => (
  // <div>hello world</div>
  <div>{props.message}</div>
);

export default mapProps({
  message: value => value + ' world'
})(Example);
```

## Why?

Often, components have to do some sort of consistent transformation on their props but doing it in just the `render()` method is awkward because they want to call other methods that depend on the transformed props, which means you'd need to either store it as yet another property or pass it around. This simplifies things and gives you a single place to put any of those transforms. Alternatively I've seen people do the transformations and save it as `state`, but this is awkard cause it's not really state and that requires you also handle initial props as well as `componentWillReceiveProps()`.

Often, you really shouldn't need this library and should instead do transformation in `render()` and break out your children into separate components you pass the transformed state to. So if you think you need this lib, take a serious look at the complexity of your single component and see if it needs to be multiple.
npm package: @rq/sly-scrolling
Description: JavaScript library for advanced one-directional scrolling with item based navigation support.
Latest version: 0.161.0

# [Sly](http://darsa.in/sly)

JavaScript library for one-directional scrolling with item based navigation support.

Sly supports navigation with:

- mouse wheel scrolling
- scrollbar (dragging the handle or clicking on scrollbar)
- pages bar
- various navigation buttons
- content dragging with mouse or touch
- automated cycling by items or pages
- lots of super useful methods

... and has a powerful & developer friendly API!

That's all build around a custom [highly optimized animation rendering](http://i.imgur.com/nszjJBZ.png) with
requestAnimationFrame, and GPU accelerated positioning with fallbacks for browsers that don't support it.

#### Dependencies

- jQuery 1.7+

#### Compatibility

Works everywhere, even in IE6+ abominations, but that is a complete accident :) IE 6-7 are not officially supported.

### [Forum](https://groups.google.com/d/forum/sly-js)

Forum is for questions. Issues are for bug reports and feature requests. Don't mix the two :)

## Usage

Constructor:

```js
var options = {
	horizontal: 1,
	itemNav: 'basic',
	speed: 300,
	mouseDragging: 1,
	touchDragging: 1
};
var frame = new Sly('#frame', options).init();
```

jQuery proxy:

```js
var options = {
	horizontal: 1,
	itemNav: 'basic',
	speed: 300,
	mouseDragging: 1,
	touchDragging: 1
};
$('#frame').sly(options);
```

jQuery proxy is good when you want to create an instance and forget about it. For anything more complex, like using methods, events, accessing instance properties, ... use the constructor and work with the instance directly.

In Node:

```js
var jQuery = require('jquery');
var Sly = require('sly-scrolling')(jQuery, window);

// now use Sly as above
var options = {
	horizontal: 1,
	itemNav: 'basic',
	speed: 300,
	mouseDragging: 1,
	touchDragging: 1
};
var frame = new Sly('#frame', options).init();
```

## Download

Latest stable release:

- [Production `sly.min.js`](https://raw.github.com/darsain/sly/master/dist/sly.min.js) - 16KB, 7KB gzipped
- [Development `sly.js`](https://raw.github.com/darsain/sly/master/dist/sly.js) - 55KB

When isolating issues on jsfiddle, you can use this URL:

- [http://darsain.github.io/sly/js/sly.min.js](http://darsain.github.io/sly/js/sly.min.js)

## Documentation

Can be found in the [docs](https://github.com/darsain/sly/tree/master/docs) directory.

## Contributing

Please, read the [Contributing Guidelines](CONTRIBUTING.md) for this project.

## License

MIT