Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
rc-image
Advanced tools
Readme
React Image.
npm install
npm start
import Image from 'rc-image';
export default () => (
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
);
Name | Type | Default | Description |
---|---|---|---|
preview | boolean | PreviewType | true | Whether to show preview |
prefixCls | string | rc-image | Classname prefix |
placeholder | boolean | ReactElement | - | if true will set default placeholder or use ReactElement set customize placeholder |
fallback | string | - | Load failed src |
previewPrefixCls | string | rc-image-preview | Preview classname prefix |
onError | (event: Event) => void | - | Load failed callback |
Name | Type | Default | Description |
---|---|---|---|
visible | boolean | - | Whether the preview is open or not |
closeIcon | React.ReactNode | - | Custom close icon |
src | string | - | Customize preview src |
movable | boolean | true | Enable drag |
scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
minScale | number | 1 | Min scale |
maxScale | number | 50 | Max scale |
forceRender | boolean | - | Force render preview |
getContainer | string | HTMLElement | (() => HTMLElement) | false | document.body | Return the mount node for preview |
imageRender | (originalNode: React.ReactElement, info: { transform: TransformType }) => React.ReactNode | - | Customize image |
toolbarRender | (originalNode: React.ReactElement, info: Omit<ToolbarRenderInfoType, 'current' | 'total'>) => React.ReactNode | - | Customize toolbar |
onVisibleChange | (visible: boolean, prevVisible: boolean) => void | - | Callback when visible is changed |
onTransform | { transform: TransformType, action: TransformAction } | - | Callback when transform is changed |
preview the merged src
import Image from 'rc-image';
export default () => (
<Image.PreviewGroup>
<Image src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
<Image src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*P0S-QIRUbsUAAAAAAAAAAABkARQnAQ" />
</Image.PreviewGroup>
);
Name | Type | Default | Description |
---|---|---|---|
preview | boolean | PreviewGroupType | true | Whether to show preview, current: If Preview the show img index, default 0 |
previewPrefixCls | string | rc-image-preview | Preview classname prefix |
icons | { [iconKey]?: ReactNode } | - | Icons in the top operation bar, iconKey: 'rotateLeft' | 'rotateRight' | 'zoomIn' | 'zoomOut' | 'close' | 'left' | 'right' |
fallback | string | - | Load failed src |
items | (string | { src: string, alt: string, crossOrigin: string, ... })[] | - | preview group |
Name | Type | Default | Description |
---|---|---|---|
visible | boolean | - | Whether the preview is open or not |
movable | boolean | true | Enable drag |
current | number | - | Current index |
closeIcon | React.ReactNode | - | Custom close icon |
scaleStep | number | 0.5 | The number to which the scale is increased or decreased |
minScale | number | 1 | Min scale |
maxScale | number | 50 | Max scale |
forceRender | boolean | - | Force render preview |
getContainer | string | HTMLElement | (() => HTMLElement) | false | document.body | Return the mount node for preview |
countRender | (current: number, total: number) => ReactNode | - | Customize count |
imageRender | (originalNode: React.ReactElement, info: { transform: TransformType, current: number }) => React.ReactNode | - | Customize image |
toolbarRender | (originalNode: React.ReactElement, info: ToolbarRenderInfoType) => React.ReactNode | - | Customize toolbar |
onVisibleChange | (visible: boolean, prevVisible: boolean, current: number) => void | - | Callback when visible is changed |
onTransform | { transform: TransformType, action: TransformAction } | - | Callback when transform is changed |
{
x: number;
y: number;
rotate: number;
scale: number;
flipX: boolean;
flipY: boolean;
}
type TransformAction =
| 'flipY'
| 'flipX'
| 'rotateLeft'
| 'rotateRight'
| 'zoomIn'
| 'zoomOut'
| 'close'
| 'prev'
| 'next'
| 'wheel'
| 'doubleClick'
| 'move'
| 'dragRebound';
{
icons: {
flipYIcon: React.ReactNode;
flipXIcon: React.ReactNode;
rotateLeftIcon: React.ReactNode;
rotateRightIcon: React.ReactNode;
zoomOutIcon: React.ReactNode;
zoomInIcon: React.ReactNode;
};
actions: {
onFlipY: () => void;
onFlipX: () => void;
onRotateLeft: () => void;
onRotateRight: () => void;
onZoomOut: () => void;
onZoomIn: () => void;
};
transform: {
x: number;
y: number;
rotate: number;
scale: number;
flipX: boolean;
flipY: boolean;
},
current: number;
total: number;
}
http://localhost:8003/examples/
npm test
npm run coverage
rc-image is released under the MIT license.
FAQs
React easy to use image component
We found that rc-image demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).