open-index/open-npm huggingface dataset:
npm package: @huunguyen312/flash-list
Description: FlashList is a more performant FlatList replacement
Author: shopify
Latest version: 1.4.3

![FlashList Image](./FlashList.png)

<div align="center">
  <a href="https://shopify.github.io/flash-list/">Website</a> •
  <a href="https://discord.gg/k2gzABTfav">Discord</a> •
  <a href="https://shopify.github.io/flash-list/docs/">Getting started</a> •
  <a href="https://shopify.github.io/flash-list/docs/usage">Usage</a> •
  <a href="https://shopify.github.io/flash-list/docs/performance-troubleshooting">Performance</a> •
  <a href="https://shopify.github.io/flash-list/docs/fundamentals/performant-components">Writing performant components</a> •
  <a href="https://shopify.github.io/flash-list/docs/known-issues">Known Issues</a>
<br><br>

**Fast & performant React Native list. No more blank cells.**

Swap from FlatList in seconds. Get instant performance.

</div>

## Installation

Add the package to your project via `yarn add @shopify/flash-list` and run `pod install` in the `ios` directory.

## Usage

We recommend reading the detailed documentation for using `FlashList` [here](https://shopify.github.io/flash-list/docs/usage).

But if you are familiar with [FlatList](https://reactnative.dev/docs/flatlist), you already know how to use `FlashList`. You can try out `FlashList` by changing the component name and adding the `estimatedItemSize` prop or refer to the example below:

```jsx
import React from "react";
import { View, Text } from "react-native";
import { FlashList } from "@shopify/flash-list";

const DATA = [
  {
    title: "First Item",
  },
  {
    title: "Second Item",
  },
];

const MyList = () => {
  return (
    <FlashList
      data={DATA}
      renderItem={({ item }) => <Text>{item.title}</Text>}
      estimatedItemSize={200}
    />
  );
};
```

To avoid common pitfalls, you can also follow these steps for migrating from `FlatList`, based on our own experiences:

1. Switch from `FlatList` to `FlashList` and render the list once. You should see a warning about missing `estimatedItemSize` and a suggestion. Set this value as the prop directly.
2. **Important**: Scan your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for explicit `key` prop definitions and remove them. If you’re doing a `.map()` use indices as keys.
3. Check your [`renderItem`](https://shopify.github.io/flash-list/docs/usage/#renderitem) hierarchy for components that make use of `useState` and verify whether that state would need to be reset if a different item is passed to that component (see [Recycling](https://shopify.github.io/flash-list/docs/recycling))
4. If your list has heterogenous views, pass their types to `FlashList` using [`getItemType`](https://shopify.github.io/flash-list/docs/usage/#getitemtype) prop to improve performance.
5. Do not test performance with JS dev mode on. Make sure you’re in release mode. `FlashList` can appear slower while in dev mode due to a small render buffer.

## App / Playground

The [fixture](https://github.com/Shopify/flash-list/tree/main/fixture) is an example app showing how to use the library.
npm package: @huunguyencs/utils
Description: Utility functions
Author: huunguyencs
Latest version: 0.1.0

# @huunguyencs/utils

Utility functions — TypeScript, dual CJS/ESM, tree-shakeable.

## Installation

```bash
npm install @huunguyencs/utils
```

## Usage

```ts
import { capitalize } from "@huunguyencs/utils";

capitalize("hello"); // "Hello"
```

## Available utils

### String

| Function | Signature | Description |
|---|---|---|
| `capitalize` | `(str: string) => string` | Capitalizes the first character of a string |
npm package: @huuyafwww/eslint-config
Description: This repository is a detailed package of ESLint rules for me.
Latest version: 1.0.0


# @huuyafwww/eslint-config


[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)

This repository is a detailed package of ESLint rules for me.


## packages

|Name|Include rule|
|---|---|
|@huuyafwww/eslint-config-browser|Browser|
|@huuyafwww/eslint-config-common|JavaScript, TypeScript, import in ESM|
|@huuyafwww/eslint-config-next|Next.js|
|@huuyafwww/eslint-config-node|Node.js|
|@huuyafwww/eslint-config-react|React|
|@huuyafwww/eslint-config-storybook|Storybook|


## Features

All packages support Flat Config 🚀

However, legacy Config is not supported  😀

## Usage

<details>

<summary> Node.js </summary>

### Installation

```
pnpm add -D @huuyafwww/eslint-config-common @huuyafwww/eslint-config-node
```

### eslint.config.js

```javascript
import { define } from '@praha/eslint-config-definer';

import { common } from './dist/index.mjs';
import { node } from '../eslint-config-node/dist/index.mjs';

const config = define([
  common,
  node,
]);

export default config({
  tsconfigPath: './tsconfig.json',
});

```

</details>

<details>

<summary> Next.js </summary>

### Installation

```
pnpm add -D @huuyafwww/eslint-config-common @huuyafwww/eslint-config-browser @huuyafwww/eslint-config-react @huuyafwww/eslint-config-next

# Optional
pnpm add -D @huuyafwww/eslint-config-storybook
```

### eslint.config.js

```javascript
import { browser } from '@huuyafwww/eslint-config-browser';
import { common } from '@huuyafwww/eslint-config-common';
import { next } from '@huuyafwww/eslint-config-next';
import { react } from '@huuyafwww/eslint-config-react';
import { storybook } from '@huuyafwww/eslint-config-storybook';
import { define } from '@praha/eslint-config-definer';

const config = define([
  common,
  browser,
  react,
  next,
  storybook, // Optional
]);

export default config({
  tsconfigPath: './tsconfig.json',
});
```

</details>

## License

[MIT](https://github.com/huuyafwww/eslint-config/blob/main/LICENSE)