mirror of
https://github.com/zhigang1992/react-content-loader.git
synced 2026-05-23 00:03:20 +08:00
Init documentation
This commit is contained in:
48
README.md
48
README.md
@@ -1,28 +1,44 @@
|
||||
# Boilerplate for creating React Npm packages with ES2015
|
||||
# React Content Loader
|
||||
|
||||
The package is based on [npm-base](https://github.com/kadirahq/npm-base) package by [Kadira](https://github.com/kadirahq) which is really great when you want to prepare Npm package. This one is prepared to be used as a starter point for React components which needs to be published on Npm.
|
||||
This project is a collection the loader basead in styles cards on Facebook.
|
||||
|
||||
It includes linting with [ESLint](http://eslint.org/) and testing with [Mocha](https://mochajs.org/), [Enzyme](http://airbnb.io/enzyme/) and [JSDOM](https://github.com/tmpvar/jsdom).
|
||||
## Usage:
|
||||
|
||||
Also there is of course ES6 transpilation.
|
||||
First install the dependencie
|
||||
```sh
|
||||
npm i react-content-loader --save-dev
|
||||
```
|
||||
|
||||
## Usage
|
||||
After import and use:
|
||||
```js
|
||||
// import the component
|
||||
import ContentLoader from 'react-content-loader'
|
||||
|
||||
1. Clone this repo
|
||||
2. Inside cloned repo run `npm install`
|
||||
3. If you want to run tests: `npm test` or `npm run testonly` or `npm run test-watch`. You need to write tests in `__tests__` folder. You need at least Node 4 on your machine to run tests.
|
||||
4. If you want to run linting: `npm test` or `npm run lint`. Fix bugs: `npm run lint-fix`. You can adjust your `.eslintrc` config file.
|
||||
5. If you want to run transpilation to ES5 in `dist` folder: `npm run prepublish` (standard npm hook).
|
||||
const MyPage = () => (<ContentLoader />);
|
||||
```
|
||||
|
||||
## Blog post about it:
|
||||
### Options
|
||||
|
||||
- [Creating React NPM packages with ES2015](http://julian.io/creating-react-npm-packages-with-es2015/)
|
||||
| Name | Type | Default | Description |
|
||||
|---|---|---|---|
|
||||
| style | Object | | |
|
||||
| type | String | `facebook` | Default style for component |
|
||||
| speed | Number | `2` | Speed for animaiton |
|
||||
| primaryColor | String | `#f3f3f3` | Background the SVG |
|
||||
| secundaryColor | String | `ecebeb` | Color of animation |
|
||||
|
||||
## Also check out
|
||||
|
||||
- [React Alert UI component](https://github.com/juliancwirko/react-s-alert)
|
||||
- [React project boilerplate with Webpack, HMR, React Router](https://github.com/juliancwirko/react-boilerplate)
|
||||
### Todo
|
||||
- [ ] Code component;
|
||||
- [ ] List component;
|
||||
- [ ] Test in several browser;
|
||||
- [ ] Better documentation;
|
||||
- [ ] A more useful new project;
|
||||
|
||||
## License
|
||||
#### Credits
|
||||
|
||||
[Boilerplate for creating React Npm packages with ES2015](https://github.com/juliancwirko/react-npm-boilerplate)
|
||||
|
||||
#### License
|
||||
|
||||
MIT
|
||||
|
||||
Reference in New Issue
Block a user