The most easy to use responsive image viewer especially for mobile devices for react.
MIT License
The most easy to use responsive image viewer especially for mobile devices for react.
npm install -S @jswork/react-smart-photo
Name | Type | Required | Default | Description |
---|---|---|---|---|
className | string | false | - | The extended className for component. |
name | string | false | - | The group name. |
items | array | false | [] | Image source set. |
options | object | false | - | SmartPhoto options. see: https://github.com/appleple/SmartPhoto |
// or use sass
@import "~smartphoto/scss/smartphoto.scss";
@import "~@jswork/react-smart-photo/dist/style.scss";
// customize your styles:
$react-smart-photo-options: ()
import ReactDemokit from '@jswork/react-demokit';
import React from 'react';
import ReactDOM from 'react-dom';
import ReactSmartPhoto from '@jswork/react-smart-photo';
import NxRandomAvatar from '@jswork/next-random-avatar';
import './assets/style.scss';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
items: NxRandomAvatar.women(5).map((item) => {
return {
id: '80',
href: item,
src: item
};
})
};
}
render() {
const { items } = this.state;
return (
<ReactDemokit
className="p-3 app-container"
url="https://github.com/afeiship/react-smart-photo">
<ReactSmartPhoto
name="g1"
items={[
{
href: NxRandomAvatar.lego(),
src: NxRandomAvatar.lego(),
id: '80'
}
]}
/>
<hr />
<ReactSmartPhoto name="g2" items={items} />
</ReactDemokit>
);
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Code released under the MIT license.