Skip to content

Commit

Permalink
Update readme with react hooks. Hide class example using details (#328)
Browse files Browse the repository at this point in the history
  • Loading branch information
davidhu2000 committed Dec 30, 2020
1 parent af5405a commit ba246f8
Showing 1 changed file with 39 additions and 7 deletions.
46 changes: 39 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,41 @@ Each loader accepts a `loading` prop as a boolean. The loader will render `null`

### Example

```js
import { useState } from "react";
import { css } from "@emotion/core";
import ClipLoader from "react-spinners/ClipLoader";

// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
display: block;
margin: 0 auto;
border-color: red;
`;

function App() {
let [loading, setLoading] = useState(true);
let [color, setColor] = useState("#ffffff");

return (
<div className="sweet-loading">
<button onClick={() => setLoading(!loading)}>Toggle Loader</button>
<input
value={color}
onChange={(input) => setColor(input.target.value)}
placeholder="Color of the loader"
/>

<ClipLoader color={color} loading={loading} css={override} size={150} />
</div>
);
}

export default App;
```

<details><summary>Example using React Class</summary>

```js
import React from "react";
import { css } from "@emotion/core";
Expand All @@ -75,18 +110,15 @@ class AwesomeComponent extends React.Component {
render() {
return (
<div className="sweet-loading">
<ClipLoader
css={override}
size={150}
color={"#123abc"}
loading={this.state.loading}
/>
<ClipLoader css={override} size={150} color={"#123abc"} loading={this.state.loading} />
</div>
);
}
}
```

</details>

## Available Loaders, PropTypes, and Default Values

Common default props for all loaders:
Expand All @@ -113,7 +145,7 @@ More info about using `css` [here](https://emotion.sh/docs/introduction)

### `size`, `height`, `width`, and `radius` props

The input to these props can be *number* or *string*.
The input to these props can be _number_ or _string_.

- If value is number, the loader will default to css unit `px`.
- If value is string, the loader will verify the unit against valid css units.
Expand Down

0 comments on commit ba246f8

Please sign in to comment.