Image

Image Component#

The Image component is used to create responsive images the are also help in page loading since the are optimized and implement lazy loading and are asyncromous. This means all necessary page data can be archived easily. It is actually the component that can be customized more so you can change the component settings.

Usage#

To use the image component you haveto import it r=from the reactjs-media module as Image

Example

Live Editor

import React from "react";
import { Image } from "reactjs-media";

const MyImage = () => {
    return (
        <>
            <Image
                src="/image.jpg"
                //you can pass in other props
            />
        </>
    );
};

import React from "react";
import { Image } from "reactjs-media";
const MyImage = () => {
    return (
        <>
            <Image
                src="/image.jpg"
                //you can pass in other props
            />
        </>
    );
};

Result

SyntaxError: Unexpected token (1:15)
1 : return (import React from "react";
                   ^

Live Editor

function Clock(props) {
    const [date, setDate] = useState(new Date());
    useEffect(() => {
        var timerID = setInterval(() => tick(), 1000);

        return function cleanup() {
            clearInterval(timerID);
        };
    });

    function tick() {
        setDate(new Date());
    }

    return (
        <div>
            <h2>It is {date.toLocaleTimeString()}.</h2>
        </div>
    );
}

function Clock(props) {
    const [date, setDate] = useState(new Date());
    useEffect(() => {
        var timerID = setInterval(() => tick(), 1000);
        return function cleanup() {
            clearInterval(timerID);
        };
    });
    function tick() {
        setDate(new Date());
    }
    return (
        <div>
            <h2>It is {date.toLocaleTimeString()}.</h2>
        </div>
    );
}

Result

Image Component#

Usage#

It is 2:14:58 PM.