open-index/open-npm huggingface dataset:
npm package: @flammenmensch/react-slot-props
Description: Polymorphic component props implementation for React
Latest version: 0.1.1

# @flammenmensch/react-slot-props

Polymorphic component props implementation for React

## Usage

```tsx
import { createSlotComponent } from '@flammenmensch/react-slot-props'
import React from 'react'

// Define component props
type MyComponentProps = {
  Header: React.ReactElement
  Content: React.ReactElement
  Footer: React.ReactElement
  anotherPropA: string
  anotherPropB: number
}

// Implement component
const MyComponent = (props: MyComponentProps) => {
  return (
      <div>
        <header>{props.Header}</header>
        <main>
          {props.Content}
          {props.anotherPropA} - {props.anotherPropB}
        </main>
        <footer>{props.Footer}</footer>
      </div>
  )
}

const SlottedComponent = createSlotComponent(MyComponent, {
  slots: ['Header', 'Content', 'Footer']
})

// Use component in your app
const App = () => {
  return (
    <SlottedComponent anotherPropA='foo' anotherPropB={42}>
      <SlottedComponent.Header value={<h1>My App</h1>} />
      <SlottedComponent.Content value={<div>Content</div>} />
      <SlottedComponent.Footer value={<div>Copyright 2024</div>} />
    </SlottedComponent>
  )
}
```

## Caveats

Optional slot props are unsupported for now

```tsx
// This won't work
type Props = {
  slot?: React.ReactElement
}

// This works
type Props = {
  slot: React.ReactElement
}
```
npm package: @flamy-dev/cornerstone-web-image-loader
Description: Cornerstone ImageLoader for Web Images (PNG, JPG)
Author: Chris Hafey
Latest version: 2.1.1

cornerstone Web Image Loader
=============================

A [cornerstone](https://github.com/cornerstonejs/cornerstone) Image Loader for web images (PNG, JPEG).

Live Examples
---------------

[Click here for a live example of this library in use!](http://rawgit.com/cornerstonejs/cornerstoneWebImageLoader/master/examples/index.html)

View the [simple image viewer](http://viewer.ohif.org/) built on cornerstone.

Install
-------

Get a packaged source file:

* [cornerstoneWebImageLoader.js](https://unpkg.com/browse/cornerstone-web-image-loader/dist/)
* [cornerstoneWebImageLoader.min.js](https://unpkg.com/browse/cornerstone-web-image-loader/dist/)


Or install via [NPM](https://www.npmjs.com/package/cornerstone-web-image-loader):

> npm install cornerstone-web-image-loader

Usage
-------

Simply include the cornerstoneWebImageLoader.js in your HTML file after you load cornerstone.js and then set the cornerstone instance as an external module for cornerstoneWebImageLoader:

````javascript
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
````

This will let cornerstoneWebImageLoader register itself with cornerstone to load imageId's that have the http or https url schemes. To display an image, pass the url to the image as the imageId parameter to a cornerstone API function loadImage().

Key Features
------------

* Provides a bridge between the cornerstone library and standard web images
* Allows XHR to be hooked so custom http headers can be added (e.g. for authentication).  View the source of the
  [example](http://rawgit.com/cornerstonejs/cornerstoneWebImageLoader/master/examples/index.html) to see how this is done.

Contributors
------------
@onluiz for fixing a bug with images not being properly invalidated
@leonardorame for adding support for CornerstoneImageLoadProgress

Build System
============

This project uses webpack to build the software.

Pre-requisites:
---------------

NodeJs - [click to visit web site for installation instructions](http://nodejs.org).

Common Tasks
------------

Update dependencies (after each pull):
> npm install

Running the build:
> npm start

Automatically running the build and unit tests after each source change:
> npm run watch

Why is this a separate library from cornerstone?
================================================

Cornerstone was designed to support loading of any kind of image regardless of its container,
compression algorithm, encoding or transport.  This is one of many possible image loaders
that can provide the image pixel data to cornerstone to display

Copyright
============
Copyright 2017 Chris Hafey [chafey@gmail.com](mailto:chafey@gmail.com)
npm package: @flamy-dev/react-easy-swipe
Description: React easy swipe - Easy handler for common touch operations
Author: Leandro Augusto Lemos
Latest version: 0.0.22

# REACT EASY SWIPE
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-easy-swipe.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-easy-swipe?ref=badge_shield)


Add swipe interactions to your react component.
* Generated using [react-init](https://www.npmjs.com/package/react-init)

## Demo
[http://leandrowd.github.io/react-easy-swipe/](http://leandrowd.github.io/react-easy-swipe/)
- Open your console;
- Swipe over the content and check your console;
- This is a touch component so make sure your browser is emulating touch.

## Tips:

1) To prevent scroll during swipe, return true from the handler passed to onSwipeMove

2) To allow mouse events to behave like touch, pass a prop allowMouseEvents

3) To prevent accidental swipes on scroll, pass a prop tolerance with the tolerance pixel as number.

## Instalation
`npm install react-easy-swipe --save`


## Usage
```javascript
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import Swipe from 'react-easy-swipe';

class MyComponent extends Component {
  onSwipeStart(event) {
    console.log('Start swiping...', event);
  }

  onSwipeMove(position, event) {
    console.log(`Moved ${position.x} pixels horizontally`, event);
    console.log(`Moved ${position.y} pixels vertically`, event);
  }

  onSwipeEnd(event) {
    console.log('End swiping...', event);
  }

  render() {
    const boxStyle = {
      width: '100%',
      height: '300px',
      border: '1px solid black',
      background: '#ccc',
      padding: '20px',
      fontSize: '3em'
    };

    return (
      <Swipe
        onSwipeStart={this.onSwipeStart}
        onSwipeMove={this.onSwipeMove}
        onSwipeEnd={this.onSwipeEnd}>
          <div style={boxStyle}>Open the console and swipe me</div>
      </Swipe>
    );
  }
}

ReactDOM.render(<MyComponent/>, document.getElementById('root'));

```

## Properties

```javascript
{
  tagName: PropTypes.string,
  className: PropTypes.string,
  style: PropTypes.object,
  children: PropTypes.node,
  allowMouseEvents: PropTypes.bool,
  onSwipeUp: PropTypes.func,
  onSwipeDown: PropTypes.func,
  onSwipeLeft: PropTypes.func,
  onSwipeRight: PropTypes.func,
  onSwipeStart: PropTypes.func,
  onSwipeMove: PropTypes.func,
  onSwipeEnd: PropTypes.func,
  tolerance: PropTypes.number.isRequired
}
```

## Contributing

Please, feel free to contribute. You may open a bug, request a feature, submit a pull request or whatever you want!


## License
[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fleandrowd%2Freact-easy-swipe.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fleandrowd%2Freact-easy-swipe?ref=badge_large)