# react-loadable-library

> Code split any library using React renderProps

Latest version **1.0.0** (published 2018-06-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-loadable-library
pnpm add react-loadable-library
yarn add react-loadable-library
bun add react-loadable-library
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2018-06-27 |
| First published | 2018-06-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=8.5.0 |
| Dependencies | 3 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | theKashey |
| Maintainers | kashey |
| Keywords | codesplitting, chunks, react |

## Links

- npm: https://www.npmjs.com/package/react-loadable-library
- Repository: https://github.com/theKashey/react-loadable-library
- Homepage: https://github.com/theKashey/react-loadable-library#readme
- Issues: https://github.com/theKashey/react-loadable-library/issues
- npm.io page: https://npm.io/package/react-loadable-library

## Dependencies (3)

- [proptypes](https://npm.io/package/proptypes.md) ^1.1.0
- [react-loadable](https://npm.io/package/react-loadable.md) ^5.4.0
- [@types/react-loadable](https://npm.io/package/@types/react-loadable.md) ^5.4.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-06-27

## README

<div align="center">
  <h1>IMPORTED LIBRARY ✂</h1>
  <br/>
  <img src="./assets/imported-logo.png" alt="imported library" width="409" align="center">
  <br/>
  <br/>
  Dont code-split components - code split libraries 
  <br/>
  <br/>
  
  <a href="https://www.npmjs.com/package/react-imported-library">
    <img src="https://img.shields.io/npm/v/react-imported-library.svg?style=flat-square" />
  </a>
    
  <a href="https://circleci.com/gh/theKashey/react-imported-library/tree/master">
   <img src="https://img.shields.io/circleci/project/github/theKashey/react-imported-library/master.svg?style=flat-square)" alt="Build status">
  </a> 
    
  <img src="https://badges.greenkeeper.io/theKashey/react-imported-library.svg" />
    
  <br/>
</div>

Use the power of renderprop to delived a Library as a React component. Based on 
[React-lodable](https://github.com/jamiebuilds/react-loadable). Does __not__ support SSR and React Suspense.
Use [react-imported-library](https://github.com/theKashey/react-imported-library) if you are looking for them.

- ⛅️ You can codesplit momentjs, you may async load any library and use it.
- 🔒 Written in TypeScript.
 
## Usage

Have you heard, than moment.js is super hudge? Code split it!
```javascript
import {importedLibrary, importedLibraryDefault, setConfig} from 'react-loadable-library';

// do you need SSR support? Probably not (affect react-imported-component settings)
setConfig({SSR: false});

// this will import `default` export
const Moment = importedLibraryDefault( () => import('momentjs'));

<Moment>
 { (momentjs) => <span> {momentjs(date).format(FORMAT)}
</Moment>
```

May be you have a small library, you may use somewhere inside your components?

Codesplit it! 
```js
import {importedLibrary} from 'react-loadable-library';
const Utils = importedLibrary( () => import('./utils.js'));

<Utils>
 { ({a,b,c }) => <span> {a(b+c())}
</Utils>
```

May be you also have to caclucate something heavy, not to do it on every `render`?
```js
// you may use "initialization hook" to offload some computations

<Utils
  initial={ ({a,b,c}) => ({ result: a(b+c()) })}
>
 {(_,state) => <span>{state.result}</span>} 
</Utils>


```

## API

- importedLibrary(`importer`, options?): Component
  - `importer` is an `import` statement, or any Promise resolver
  - options 
    - options.async:boolean - enables React.suspense, ie throws a Promise on loading
    - options.exportPicker - allows you to "pick" export from the original file
    
- importedLibraryDefault - is just importedLibrary with _exportPicker_ configured to pick `.default`

- Component
  - `initial: (library: T) => K;` - state initializator
  - `children: (library: T, state: K) => React.ReactNode` - function-as-children
  - `error: ReactComponent` - error indicator
  - `loading: ReactComponent` - __unthrottled__ loading indicator.       


## Licence
MIT

---
_Source: https://npm.io/package/react-loadable-library · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._