Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refacto update #37

Merged
merged 5 commits into from Aug 11, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion .babelrc
@@ -1,4 +1,4 @@
{
"presets": [ "react", "es2015", "stage-0"],
"presets": ["react", "es2015", "stage-0"],
"plugins": ["emotion"]
}
6 changes: 3 additions & 3 deletions CONTRIBUTING.md
Expand Up @@ -18,12 +18,12 @@ Install the necessary dependencies (you can use `npm` or `yarn`):

After finishing your feature, to update the `dist` folder, you can run:

npm prepublish
npm run prepublish

If you want to make changes to the demo page, you can edit the files in `examples` and `docs` folder.
To see the changes, you can use `webpack` to update the bundle file.

webpack --watch
npm run watch

Make or add changes, commit your changes:

Expand All @@ -32,7 +32,7 @@ Make or add changes, commit your changes:

Make sure to run the necessary tests and lints and fix any errors:

npm run lint;
npm run lintfix;

Push up to Github:

Expand Down
18 changes: 14 additions & 4 deletions README.md
Expand Up @@ -75,6 +75,13 @@ class AwesomeComponent extends React.Component {
```js
import React from 'react';
import { RingLoader } from 'react-spinners';
import {css} from 'react-emotion';

const override = css`
display: block;
margin: 0 auto;
border-color: red;
`;

class AwesomeComponent extends React.Component {
constructor(props) {
Expand All @@ -87,7 +94,7 @@ class AwesomeComponent extends React.Component {
return (
<div className='sweet-loading'>
<ClipLoader
loaderStyle={{display: "block", margin: "0 auto", borderColor: 'red'}}
className={override}
sizeUnit={"px"}
size={"150"}
color={'#123abc'}
Expand All @@ -109,11 +116,14 @@ Common default props for all loaders:
```js
loading: true
color: '#000000'
loaderStyle: {}
className: ''
```
Note:
For loaderStyle, the resulting css will be the combination of the default props and the newly passed in css. This typically adjusts the css of the wrapper of the loader, not the actual loader properties themselves.
Instead of writing css properties in kebab-case like regular css, you write them in camelCase, for example background-color would be backgroundColor. You can find out more details [here](https://emotion.sh/docs/object-styles).
`className` works exactly like the `className` works with the emotion package.
You can directly write your css in css syntax without the dirty camelCase css in jss syntax.
We recommend you to use this awesome library in your project. It supports Server side rendering with HTTP2 Stream!
More info about using className [here](https://emotion.sh/docs/css)



Loader | size:int | height:int | width:int | radius:int | margin:str
Expand Down
6 changes: 3 additions & 3 deletions docs/bundle.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/bundle.js.map

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/vendor.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docs/vendor.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.