Neurotoxin Powered Marketing

    rt-image
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.16 • Public • Published

    React-Image

    basic image preview component with headers

    react node-current NPM Build Status NPM Downloads

    Usage

    npm install rt-image
     
    # yarn add rt-image 

    examples

    import React, { useEffect, useState } from 'react';
    import ReactDOM from 'react-dom';
     
    import Image from 'rt-image';
     
    const images = [
      'https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg',
      'https://images.pexels.com/users/avatars/454176/naturally-beautiful-inspiration-893.jpeg?w=256&h=256&fit=crop&crop=faces&auto=compress',
      'https://images.pexels.com/photos/1133957/pexels-photo-1133957.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
      'https://images.pexels.com/photos/556666/pexels-photo-556666.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500',
    ];
     
    const App = () => {
      const [src, setSrc] = useState(images[0]);
      useEffect(() => { setTimeout(() => setSrc(images[1])); }, [src]);
     
      return (
        <div className="App">
          <Image style={{ marginRight: '5px' }} src={src} errorMessage="some thing bad happen" />
          <Image style={{ marginRight: '5px' }} src={images[2]} errorMessage="load image error" />
          <Image src={images[3]} />
        </div>
      );
    };
     
    ReactDOM.render(<App />, document.getElementById('root'));

    request image width headers

    <Image src="https://xxx.images.com/11111" headers={{ Authorization: 'xxx' }} />

    custom image loader

    <Image src="https://xxx.images.com/11111" loader={() => <div>loading...</div>} />

    custom error displayer

    <Image src="https://xxx.images.com/11111" renderError={() => <div>some error happens</div>} />

    example

    Properties

    type description required
    src string image url true
    width number image component width false
    height number image component height, default same with width false
    className string custom className to image component false
    style React.CSSProperties styles false
    description string used as image alt currently false
    errorMessage string custom error message false
    headers object request headers false
    loader () => React.ReactNode / null custom image loader false
    renderError () => React.ReactNode / null custom error displayer false

    License

    MIT © Rynxiao/react-image

    Keywords

    Install

    npm i rt-image

    DownloadsWeekly Downloads

    7

    Version

    1.0.16

    License

    MIT

    Unpacked Size

    59.7 kB

    Total Files

    14

    Last publish

    Collaborators

    • ryn