simplr-loaders
Advanced tools
React CSS loaders with no prerequisites for required styles loading.
React CSS loaders with no prerequisites for required styles loading.
$ npm install simplr-loaders --save
import * as React from "react";
import { BubbleLoader } from "simplr-loaders";
export class MyComponent extends React.Component<{}, {}> {
render() {
return <BubbleLoader />;
}
}
This package currently contains two loaders:
SpinnerLoaderBubbleLoaderIf you'd like to see more loaders here feel free to contribute.
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.
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}.
$ npm install
$ npm run example && npm run start
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:
StylesClassprops.classNameBase 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;
}
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:
css-to-ts when building).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>;
}
}
Use SCSS to write a loader's stylesheet.
Next to all styles of your loader you should implement two additional classNames:
.expanded when loader takes all area of parrent container (default)..reduced when loader takes strict area. Basically it should contain specified height and width.Released under the MIT license.
FAQs
React CSS loaders with no prerequisites for required styles loading.
The npm package simplr-loaders receives a total of 3 weekly downloads. As such, simplr-loaders popularity was classified as not popular.
We found that simplr-loaders demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Company News
Socket is joining TC54 to help develop standards for software supply chain security, contributing to the evolution of SBOMs, CycloneDX, and Package URL specifications.
Security News
PyPI now allows maintainers to archive projects, improving security and helping users make informed decisions about their dependencies.
Research
Security News
Malicious npm package postcss-optimizer delivers BeaverTail malware, targeting developer systems; similarities to past campaigns suggest a North Korean connection.