react-flares
v2.0.1
Published
A React component to facilitate lazy loading.
Downloads
12
Readme
react-flares
A small utility library for lazy loading React components. Also contains a scaffolding cli designed around library. Uses React, TypeScript and Webpack in scaffolding for implementation and bundling.
Table of Contents
Installation
npm install -g react-flares
Usage
Project Setup
Run these commands to create default project set up:
react-flares project MyProject
npm install
Webpack dev server comes installed with the setup. Start it with:
npm start
Commands
Create a project. Should only be used once per project.
react-flares project ProjectName
Create a module with a default component.
react-flares module ModuleName
Create a component with a view and types file.
# Create a component within a module
react-flares component ModuleName:ComponentName
# Create a component outside of module
react-flares component ~:ComponentName
# Create a sub-component (Allows more organization than changing functionality of the component.)
react-flares component ModuleName:ComponentName/SubComponentName
Options:
- --no-mod - Prevents create of default module and all its associated files. (project)
- --no-styles - Prevents creation of styles file. (project, module)
- --no-comp - Prevents creation of default component and all its associated files. (project, module)
- --no-view - Prevents creation of default components view file. (project, module, component)
- --no-types - Prevents creation of default components types file. (project, module, component)
Flares
Flares are a way of lazy loading a component. They are used just like normal React components but are set up to load their corresponding component before trying to render it.
ReactDom.render(
<MyComponentFlare />
, document.getElementById("content")
);
The component flare files are generated when ever a component is generated with the cli tool. However their implementation is simple if you have to make one yourself.
import * as ReactFlares from 'react-flares';
import {MyComponentProps} from "../../modules/MyModule/MyComponent.types";
// Importing the component's props from its types file allows you to pass the same props to the flare as you would to the regular component
export class MyComponentFlare extends ReactFlares.ComponentFlare<ReactFlares.ComponentFlareProps & MyComponentProps> {
get componentId(): string {return "MyModule:MyComponent";}
You may also choose to use a flare directly without of inheritance.
ReactDom.render(
<ReactFlares.ComponentFlare componentId="MyModule:MyComponent" />
, document.getElementById("content")
);
Resolution
Modules correspond to bundles created by webpack. The default setup creates a bundle from each .module.ts file. When a module is created its default component is imported and registered in its constructor.
export class MyModuleModule implements ReactFlares.Module {
private _components: {[name:string]: any};
constructor() {
this._components = {};
this._components["MyComponent"] = MyComponent;
}
}
When you need additional components to be fetchable with flares, you'll need to add similar lines to their module's constructor.
Configuration
You can set a different root for flares to load .js and .css files from. Defaults are "js/" and "css/", which corresponds to how webpack-dev-server is setup to load them.
import * as ReactFlares from "react-flares";
ReactFlares.setJsRoot("path/to/js/");
ReactFlares.setCssRoot("path/to/css/");