open-index/open-npm huggingface dataset:
npm package: @phamd7/react-pdf-highlighter
Description: Set of React components for PDF annotation
Author: Di Pham
Latest version: 5.7.19
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

☕️ [Buy me a coffee](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=SC4D2NS8G2JJ8&source=url)

![Node CI](https://github.com/agentcooper/react-pdf-highlighter/workflows/Node%20CI/badge.svg)

## react-pdf-highlighter

`react-pdf-highlighter` is a [React](https://reactjs.org/) library that provides annotation experience for PDF documents on web. It is built on top of PDF.js by Mozilla. Text and rectangular highlights are supported. Highlight
data format is independent of the viewport, making it suitable for saving on the
server.

### Example

For online example check https://agentcooper.github.io/react-pdf-highlighter/.

To run the example app locally:

```
npm install
npm start
```

Create React App example is available in [`./create-react-app-example`](https://github.com/agentcooper/react-pdf-highlighter/tree/main/create-react-app-example). Make sure to run `npm install` there as well.

### Installation

`npm install react-pdf-highlighter`

See
[`./example/src/App.tsx`](https://github.com/agentcooper/react-pdf-highlighter/blob/main/example/src/App.tsx)
for React component API example.

### Prior art

[`react-pdf`](https://github.com/wojtekmaj/react-pdf) and
[`react-pdfjs`](https://github.com/erikras/react-pdfjs) only provide React
wrappers for PDF.js and do not have built-in annotation functionality.

[`pdfjs-annotate`](https://github.com/instructure/pdf-annotate.js/) does not
provide text highlights out of the box.

PDF.js provides only viewer:

> [PDF.js is mainly written for reading PDF files, not editing them. Because of that we don't yet support adding any kind of annotations. We do however support rendering a number of annotation types for viewing.](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#is-it-possible-to-add-annotations-to-a-pdf)

See also:

- https://github.com/mozilla/pdf.js
- https://github.com/wojtekmaj/react-pdf
- https://github.com/erikras/react-pdfjs
- https://github.com/instructure/pdf-annotate.js/
- https://blogs.dropbox.com/tech/2016/11/annotations-on-document-previews/

### FAQ

##### Can I get a new PDF with the highlights embedded into the document?

Take a look at https://pdf-lib.js.org.

##### Wasn't this named react-pdf-annotator at some point?

Yes, but people from https://www.pdfannotator.com/ asked me to rename, since [they have a trademark for PDF Annotator](https://www.pdfannotator.com/en/help/infodisclaimer).

##### I'm trying the demo with my PDF and it is not loading!

Please check the [CORS headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) on your url. It is required for the cross-domain request.

### Compatibility

Works in Google Chrome, Safari 10+, Firefox 52+. Not tested in Internet
Explorer.
npm package: @phamdanhhuong/bai_tap_7
Description: A library for managing shopping cart functionality with standardized components.
Author: Phạm Danh Hưởng
Latest version: 1.0.3

# Shopping Cart Library

This is a TypeScript library for managing a shopping cart functionality in your applications. It provides reusable components for building a shopping cart interface, including the ability to add, update, and remove items.

## Components

- **Cart**: Manages the shopping cart's state and provides methods to manipulate the cart.
- **CartItem**: Represents an individual item in the cart.
- **InputText**: A customizable text input field.
- **Button**: A customizable button component.
- **Modal**: A modal dialog for displaying content.
- **Card**: A card UI element for presenting information.

## Installation

To install the library, use npm:

```
npm install shopping-cart-library
```

## Usage

Here is an example of how to use the components in your project:

```tsx
import { Cart, CartItem, InputText, Button, Modal, Card } from 'shopping-cart-library';

// Example usage of Cart
const myCart = new Cart();
myCart.addItem({ id: 1, name: 'Product 1', price: 100 });

// Render CartItem
<CartItem item={myCart.getItems()[0]} onRemove={() => myCart.removeItem(1)} />

// Render InputText
<InputText value={someValue} placeholder="Enter text" onChange={handleChange} />

// Render Button
<Button label="Add to Cart" onClick={handleAddToCart} />

// Render Modal
<Modal visible={isModalVisible} content={<div>Modal Content</div>} onClose={handleClose} />

// Render Card
<Card title="Product Title" content="Product Description" actions={<Button label="Buy Now" onClick={handleBuyNow} />} />
```

## Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

## License

This project is licensed under the MIT License. See the LICENSE file for details.
npm package: @phamhuuan/react-native-switch
Description: Customisable switch component for RN
Latest version: 1.0.1

# react-native-switch
Customisable switch component for RN and React Native Web

### Installation

```sh
$ npm install --save react-native-switch
```
or

```sh
yarn add react-native-switch
```

### Usage

```javascript
import { Switch } from 'react-native-switch';

export const App = () => (
  <Switch
    value={true}
    onValueChange={(val) => console.log(val)}
    disabled={false}
    activeText={'On'}
    inActiveText={'Off'}
    circleSize={30}
    barHeight={1}
    circleBorderWidth={3}
    backgroundActive={'green'}
    backgroundInactive={'gray'}
    circleActiveColor={'#30a566'}
    circleInActiveColor={'#000000'}
    renderInsideCircle={() => <CustomComponent />} // custom component to render inside the Switch circle (Text, Image, etc.)
    changeValueImmediately={true} // if rendering inside circle, change state immediately or wait for animation to complete
    innerCircleStyle={{ alignItems: "center", justifyContent: "center" }} // style for inner animated circle for what you (may) be rendering inside the circle
    outerCircleStyle={{}} // style for outer animated circle
    renderActiveText={false}
    renderInActiveText={false}
    switchLeftPx={2} // denominator for logic when sliding to TRUE position. Higher number = more space from RIGHT of the circle to END of the slider
    switchRightPx={2} // denominator for logic when sliding to FALSE position. Higher number = more space from LEFT of the circle to BEGINNING of the slider
    switchWidthMultiplier={2} // multiplied by the `circleSize` prop to calculate total width of the Switch
    switchBorderRadius={30} // Sets the border Radius of the switch slider. If unset, it remains the circleSize.
  />
)
```
### Switch
![switch](https://cloud.githubusercontent.com/assets/13334788/19770557/c1d935ee-9c70-11e6-931e-8812fbe62774.gif)


##
If this project was helpful to you, please <html>
 <a href="https://www.buymeacoffee.com/FnENSxi" target="_blank"><img src="https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/yellow_img.png" alt="Buy Me A Coffee" style="height: auto !important;width: auto !important;" ></a>
 </html>
npm package: @phamleduy04/better-erela.js-spotify
Description: A better version of erela.js-spotify plugin
Author: KagChi
Latest version: 1.3.15


# shitty-erela.js-spotify 
A erela.js spotify plugin, but more shitty. they said 👀

[![NezukoChan Tavern](https://discordapp.com/api/guilds/785715968608567297/embed.png?style=banner2)](https://discord.gg/8hmbMUCVMD)

## Features
 - Support both api and scrape strategy
 - Track caching
 - Full coverage of spotify api, load track from show, episode, album, and artist
 - Lightweight
 - Shit
 - Shitty
 - And more shit 😅

## Requirements
 - Node.JS 14.x
 - Erela.JS 2.3.3
## Usage Example
<a href="https://github.com/NezuChan/better-erela.js-spotify"> <img src="https://cdn.discordapp.com/attachments/785715969317142540/881457254468030474/carbon_2.png"></a>
npm package: @phamleduy04/cheshire
Description: TLRU / LRU cache based on @discordjs/collections
Author: Saya
Latest version: 2.0.7

# Cheshire

![Cheshire](https://azurlane.netojuu.com/w/images/thumb/2/28/Cheshire.png/702px-Cheshire.png)

> Your maid catgirl cache manager based on [Collections](https://discord.js.org/#/docs/collection/main/general/welcome) and [TLRU](https://www.npmjs.com/package/tlru)

> Supports both TLRU or LRU cache modes

> The ShipGirl Project; ⓒ Azur Lane

### Installation

* For stable release

> npm i github:Deivu/Cheshire#2.0.2

### Documentation

> https://deivu.github.io/Cheshire/

### What is LRU and TLRU?

> LRU cache behavior can be found in: https://en.wikipedia.org/wiki/Cache_replacement_policies#Least_recently_used_(LRU)

> TLRU cache behavior can be found in: https://en.wikipedia.org/wiki/Cache_replacement_policies#Time_aware_least_recently_used_(TLRU)

### Example Usage (Discord.JS V13)
```js
const { Collection } = require('@discordjs/collection');
const { Cheshire } = require('cheshire');

const MessageCache = new Cheshire({ 
	limit: 100, 
	lifetime: 1.8e+6 
});
/* 
 * A use case of custom executor, return true if an item must be deleted, or false if an item should be rescheduled for deletion
 * The code below is an example of the usecase of an executor.
 * Some key points points here is:
 *  "key" refers to the key of the item in this instance
 *  "value" refers to the value of the item in this instance
 */
const UserCache = new Cheshire({ 
	lifetime: 3.6e+6, 
	executor: (key, value) => {
		// In this case I don't want to touch my bot user cache, so it would just reschedule itself again
		if (key === value.client.user.id) return false;
		// In this example, I don't want to uncache users / members that is on a voice channel
		const inVoice = value.client.guilds.cache.some(guild => guild.members.cache.some(member => key === member.id && member.voice.channelId));
		if (inVoice) return false;
		// You can also delete other caches in here, example member cache since we know this user isn't on voice
		value.client.guilds.cache.each(guild => guild.members.cache.sweep(member => key === member.id));
		// In this point since we already checked our filters, we can safetly say we want to delete this user
		return true;
	}
});

// Client is your Discord.JS client
const client = new Client({
	makeCache: manager => {
		if (manager.name === 'MessageManager') return MessageCache;
		else if (manager.name === 'UserManager') return UserCache;
		else return new Collection();
	},
});
```