mirror of
https://github.com/infeng/react-viewer.git
synced 2025-12-08 17:36:40 +00:00
chore: update README.md
This commit is contained in:
parent
e7e758a29f
commit
cab7747865
35
README.md
35
README.md
@ -9,6 +9,8 @@ Because I can`t be comfortable using [viewerjs](https://github.com/fengyuanchen/
|
||||
|
||||
## Installation
|
||||
|
||||
> react >= 16.8.0 | react-dom >= 16.8.0
|
||||
|
||||
```bash
|
||||
npm install react-viewer --save
|
||||
```
|
||||
@ -18,29 +20,20 @@ npm install react-viewer --save
|
||||
```javascript
|
||||
import * as React from 'react';
|
||||
import Viewer from 'react-viewer';
|
||||
import 'react-viewer/dist/index.css';
|
||||
|
||||
class App extends React.Component<any, any> {
|
||||
constructor() {
|
||||
super();
|
||||
function App() {
|
||||
const [ visible, setVisible ] = React.useState(false);
|
||||
|
||||
this.state = {
|
||||
visible: false,
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => { this.setState({ visible: !this.state.visible }); } }>show</button>
|
||||
<Viewer
|
||||
visible={this.state.visible}
|
||||
onClose={() => { this.setState({ visible: false }); } }
|
||||
images={[{src: '', alt: ''}]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => { setVisible(true); } }>show</button>
|
||||
<Viewer
|
||||
visible={visible}
|
||||
onClose={() => { setVisible(false); } }
|
||||
images={[{src: '', alt: ''}]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user