Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

rc-image

Package Overview
Dependencies
Maintainers
5
Versions
92
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-image

React easy to use image component

  • 7.11.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1.3M
increased by1.49%
Maintainers
5
Weekly downloads
 
Created

What is rc-image?

The rc-image npm package is a React component library for displaying images in a more versatile and enhanced manner. It provides features such as modal viewing, image rotation, zooming, and dragging, making it a powerful tool for implementing image galleries or for enhancing the image viewing experience in web applications.

What are rc-image's main functionalities?

Modal Image Viewing

This feature allows images to be viewed in a modal (popup) when clicked, providing a closer look. The code sample demonstrates how to enable modal viewing with visibility control.

{"import React from 'react';\nimport Image from 'rc-image';\n\nexport default () => (\n  <Image\n    preview={{\n      visible: true,\n      onVisibleChange: (vis) => console.log('visible:', vis),\n    }}\n    src='path/to/image.jpg'\n  />\n);"}

Image Rotation

Enables the rotation of images. This example shows how to rotate an image by 90 degrees using inline styles.

{"import React from 'react';\nimport Image from 'rc-image';\n\nexport default () => (\n  <Image\n    style={{ transform: 'rotate(90deg)' }}\n    src='path/to/image.jpg'\n  />\n);"}

Zoom and Drag

This feature allows users to zoom in/out on images and drag them around for better viewing. The code sample demonstrates enabling zoom and drag capabilities in the preview modal.

{"import React from 'react';\nimport Image from 'rc-image';\n\nexport default () => (\n  <Image\n    preview={{\n      zoomable: true,\n      draggable: true,\n    }}\n    src='path/to/image.jpg'\n  />\n);"}

Other packages similar to rc-image

Keywords

FAQs

Package last updated on 09 Sep 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc