open-index/open-npm huggingface dataset:
npm package: @feathertech/card
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
Latest version: 0.0.1

# Card

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.

## Code scaffolding

Run `ng generate component component-name --project card` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project card`.
> Note: Don't forget to add `--project card` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build card` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build card`, go to the dist folder `cd dist/card` and run `npm publish`.

## Running unit tests

Run `ng test card` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @feathertech/header
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
Latest version: 0.0.4

# Header

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.

## Code scaffolding

Run `ng generate component component-name --project header` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project header`.
> Note: Don't forget to add `--project header` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build header` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build header`, go to the dist folder `cd dist/header` and run `npm publish`.

## Running unit tests

Run `ng test header` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @feathertech/notifications
Description: This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.
Latest version: 0.0.2

# Notifications

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.0.5.

## Code scaffolding

Run `ng generate component component-name --project notifications` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project notifications`.
> Note: Don't forget to add `--project notifications` or else it will be added to the default project in your `angular.json` file. 

## Build

Run `ng build notifications` to build the project. The build artifacts will be stored in the `dist/` directory.

## Publishing

After building your library with `ng build notifications`, go to the dist folder `cd dist/notifications` and run `npm publish`.

## Running unit tests

Run `ng test notifications` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
npm package: @featherweight/loadable
Description: Loadable is a thin wrapper around `React.lazy` function, that comes with a few handy benefits such as preloading and named exports support.
Latest version: 0.1.3

# @featherweight/loadable

Loadable is a thin wrapper around `React.lazy` function, that comes with a few handy benefits such as preloading and named exports support.

## Examples

Loadable can work with named exports using second argument, while `React.lazy` only works with default export.

```ts
// image.tsx
export const Image: React.FC<ImageProps> = props => ...
export default Image
// ---------

import {loadable} from '@featherweight/loadable'

// if want to use default export
const Image = loadable(() => import('./image'))

// or if you want to use named export
const Image = loadable(() => import('./image'), x => x.Image)

```

And the second handy feature is ability to preload component.

```ts
const App = () => {
  const [images, setImages] = useState(null)

  useEffect(() => {
    Image.preload()
  }, [])

  return (
    <div>
      <button onClick={fetchImages}>load images</button>
      {images && images.map((img) => (
        <Image src={img.src} ... />
      ))}
    </div>
  )
}
```