simplr-loaders
v2.1.2
Published
React CSS loaders with no prerequisites for required styles loading.
Downloads
11
Readme
simplr-loaders
React CSS loaders with no prerequisites for required styles loading.
Get started
$ npm install simplr-loaders --saveUsage
import * as React from "react";
import { BubbleLoader } from "simplr-loaders";
export class MyComponent extends React.Component<{}, {}> {
render() {
return <BubbleLoader />;
}
}Loaders
This package currently contains two loaders:
SpinnerLoaderBubbleLoader
If you'd like to see more loaders here feel free to contribute.
Style
Stylesheets
You don't need to import loaders stylesheets. By default they are loaded after first use of a loader component.
If you still want to load css yourself, you can cancel default behavior by setting useDefaultStyle={false}.
and load it from stylesheets that are included in this package.
Use of space
We found it useful for loaders to center itself and expand to take all possible area around.
If you want to position loader yourself you can set prop shouldExpand={false}.
Example
- Clone this repository
- Install packages in simplr-loaders root directory:
$ npm install- Go to 'example' folder and run:
$ npm run example && npm run startAPI
LoaderBase
export abstract class LoaderBase<TProps extends BaseProps, TState> extends React.PureComponent<TProps, TState>LoaderBase is a base class of all loader components in simplr-loaders.
protected abstract LoaderId: string;
Unique identifier of a loader.
protected StylesClass: string;
Default className of a loader component. If not declared, LoaderId will be taken as default className.
protected AppendStyles(styles: string, props: TProps)
Puts stringified stylesheet of a loader into the <head>.
styles: string - stringified stylesheet.
props: TProps - component props.
protected get AggregatedClassName()
Aggregates all classNames of a loader:
- default className defined in
StylesClass props.className- className that defines how loader use the space (whether it's size should be expanded or reduced).
BaseProps
Base props of all loader components in simplr-loaders.
export interface BaseProps {
/**
* Custom class name of a loader.
*
* @type {string}
* @memberOf BaseProps
*/
className?: string;
/**
* Specifies whether style should be placed in <head>.
* This is a default behavior you can cancel.
*
* @type {boolean}
* @memberOf BaseProps
*/
useDefaultStyle?: boolean;
/**
* Specifies whether the loader should expand to take all possible area.
* Default value `true`.
* Using this prop you can cancel the default behavior.
* In that case the loader will take an area of a strict size.
*
* @type {boolean}
* @memberOf BaseProps
*/
shouldExpand?: boolean;
}Contribution
If you want to add loader to this package you'll need to know basic concepts of:
In src/your-loader-folder should be placed three files:
- Stylesheet written in SCSS;
- React component of a loader written in TypeScript;
- TypeScript file with exported stringified stylesheet of your loader (automatically generated with
css-to-tswhen building).
Component
Use TypeScript to create component class:
import * as React from "react";
// `MyLoaderStyle` TypeScript file with stringified css will be generated from your stylesheet when build is started.
// But you still have to import it.
import { MyLoaderStyle } from "./spinner-loader-style";
import { LoaderBase, BaseProps } from "../abstractions/loader-base";
// Loader MUST extend LoaderBase class.
// Every loader MUST have props that are defined in BaseProps.
// If you need more props, you can create your own interface with BaseProps extended.
export class MyLoader extends LoaderBase<BaseProps, {}> {
// Load style using `AppendStyles` from LoaderBase.
constructor(props: BaseProps, context: any) {
super(props, context);
this.AppendStyles(MyLoaderStyle, props);
}
// Define loader id.
// Id is used to identify style in `<head>`.
protected LoaderId: string = "my-loader";
// This property is optional.
// If you don't define `StylesClass`, `LoaderId` will be taken as 'StylesClass'.
protected StylesClass: string = "class-name-of-my-loader";
// Define containers structure that your loader requires.
render() {
// Use `AggregatedClassName` from `LoaderBase` to define all classNames of your loader.
return <div className={this.AggregatedClassName}>
<div></div>
<div></div>
</div>;
}
}StyleSheet
Use SCSS to write a loader's stylesheet.
Next to all styles of your loader you should implement two additional classNames:
.expandedwhen loader takes all area of parrent container (default)..reducedwhen loader takes strict area. Basically it should contain specified height and width.
License
Released under the MIT license.