https://github.com/thekashey/react-imported-library
✂Code-split any library using renderProps!
https://github.com/thekashey/react-imported-library
code-splitting codesplit reactjs
Last synced: about 1 year ago
JSON representation
✂Code-split any library using renderProps!
- Host: GitHub
- URL: https://github.com/thekashey/react-imported-library
- Owner: theKashey
- License: mit
- Created: 2018-06-27T02:17:08.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-27T07:31:15.000Z (over 7 years ago)
- Last Synced: 2025-06-10T08:02:00.347Z (about 1 year ago)
- Topics: code-splitting, codesplit, reactjs
- Language: TypeScript
- Homepage:
- Size: 241 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
IMPORTED LIBRARY ✂
Dont code-split components - code split libraries
Use the power of renderprop to delived a Library as a React component. Based on
[React-imported-component](https://github.com/theKashey/react-imported-component). Support SSR and React Suspense.
- ⛅️ You can codesplit momentjs, you may async load any library and use it.
- 🏎 Sync on server, and for already loaded stuff, async on client.
- 🚀 Bundler-independent SSR (when used with react-imported-component).
- 🔒 Written in TypeScript.
- 😴 Suspense friendly
## Usage
Have you heard, than moment.js is super hudge? Code split it!
```javascript
import {importedLibraryDefault, setConfig} from 'react-imported-library';
// do you need SSR support? Probably not (affects react-imported-component settings)
setConfig({SSR: false});
// this will import `default` export
const Moment = importedLibraryDefault( () => import('momentjs'));
{ (momentjs) => {momentjs(date).format(FORMAT)} }
// You can use suspense
const Moment = importedLibraryDefault( () => import('momentjs'), { async: true });
{ (momentjs) => {momentjs(date).format(FORMAT)} }
```
May be you have a small library, you may use somewhere inside your components?
Codesplit it!
```js
import {importedLibrary} from 'react-imported-library';
const Utils = importedLibrary( () => import('./utils.js'));
{ ({a,b,c }) => {a(b+c())} }
```
May be you also have to calculate something heavy, not to do it on every `render`?
```js
// you may use "initialization hook" to offload some computations
({ result: a(b+c()) })}
>
{(_,state) => {state.result}}
```
## API
#### importedLibrary
- `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
- `importedLibraryDefault(importer, options?): Component` - is just importedLibrary with `exportPicker` configured to pick `.default`
#### lazyLibrary
- `lazyLibrary(importer): Component` - is just importedLibrary with `async` configured be __true__
#### all helpers returns "Component"
- Component
- `initial: (library: T) => K;` - state initializator, state will be passed as second argument to a children.
- `children: (library: T, state: K) => React.ReactNode` - function-as-children
- -- does not work in async mode --
- `error: ReactComponent` - error indicator
- `loading: ReactComponent` - __unthrottled__ loading indicator.
## Licence
MIT