Material style image with loading animation

Related tags

react image material-ui loader
Overview

Material UI Image

JavaScript Style Guide Build Status

Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern suggests.

Example

Installation

npm install material-ui-image

Note: This is the version for Material-UI 1.0.0-rc.0 or later. If you are using Material-UI 1.0.0-beta, you should update to the latest version. If you are still using Material-UI 0.x, you can use our legacy version.

Usage

Use this component just like a regular img tag.

import Image from 'material-ui-image'

<Image
  src="http://loremflickr.com/300/200"
/>

Material UI Image Properties

Name Type Default Description
animationDuration number 3000 Duration of the fading animation, in milliseconds.
aspectRatio float (1/1) Specifies the aspect ratio of the image.
cover bool false Override the image's object fit to cover
color string white Override the background color.
disableError bool false Disables the error icon if set to true.
disableSpinner bool false Disables the loading spinner if set to true.
disableTransition bool false Disables the transition if set to true.
errorIcon node Override the error icon.
iconContainerStyle object Override the inline-styles of the container that contains the loading spinner and the error icon.
imageStyle object { width: 'inherit', height: 'inherit' } Override the inline-styles of the image.
loading node Override the loading component.
onClick func Fired when the user clicks on the image happened.
src* string Specifies the URL of an image.
style object Override the inline-styles of the root element.

* required property

All other props are passed through to the underlying img element after the image is loaded.

License

The files included in this repository are licensed under the MIT license.

Issues
  • Image do not load, result on a eternal loading

    Image do not load, result on a eternal loading

    For some reason, the src parameter is not passed to the img tag.

    {src && !this.state.imageError ? <img
              {...image}
              style={{
                ...styles.img,
                opacity: !this.state.imageLoaded ? 0 : 1,
                animation: !this.state.imageLoaded ? '' : 'filter-animation 1s',
                ...imageStyle
              }}
              onLoad={() => this.imageLoaded()}
              onError={() => this.setState({imageError: true})}
            /> : null
            }
    

    But, when i added src: {src} before onLoad: ..., the image load ok.

    {src && !this.state.imageError ? <img
              {...image}
              style={{
                ...styles.img,
                opacity: !this.state.imageLoaded ? 0 : 1,
                animation: !this.state.imageLoaded ? '' : 'filter-animation 1s',
                ...imageStyle
              }},
              src: {src},
              onLoad={() => this.imageLoaded()}
              onError={() => this.setState({imageError: true})}
            /> : null
            }
    
    bug 
    opened by leojnxs 10
  • Sometimes my image doesn't load

    Sometimes my image doesn't load

    <Image src={tile.src} imageStyle={{ height: tile.height, width: tile.width }} color='transparent' />
    

    It stays spinning forever: image

    even though the image was requested in the Network tab of my inspector: image

    bug 
    opened by shamoons 9
  • Problem with onTouchTap while clicking on desktop

    Problem with onTouchTap while clicking on desktop

    Whenever I try to left click an Image, its onTouchTap function isn't fired. It works just fine with right clicks or mouse wheel clicks.

    bug 
    opened by daralion 8
  • Update react-styleguidist to the latest version 🚀

    Update react-styleguidist to the latest version 🚀

    Version 6.0.0 of react-styleguidist just got published.

    Dependency react-styleguidist
    Current Version 5.5.10
    Type devDependency

    The version 6.0.0 is not covered by your current version range.

    Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.

    I recommend you look into these changes and try to get onto the latest version of react-styleguidist. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.


    Release Notes v6.0.0

    Breaking changes

    Changed fenced code blocks handling in Markdown

    Any code block with a language tag of js, jsx or javascript will be rendered as a React component with a interactive playground.

    React component example:
    
    &lt;Button size="large"&gt;Push Me&lt;/Button&gt;
    

    You can disable an editor by passing a 'noeditor' modifier:

    &lt;Button&gt;Push Me&lt;/Button&gt;
    

    You can disable a playground by passing a 'static' modifier:

    import React from 'react';
    

    Examples with all other languages are rendered only as highlighted source code, not an actual component:

    &lt;Button size="large"&gt;Push Me&lt;/Button&gt;
    

    Fenced code blocks without a language or indented code blocks are rendered as before: with an interactive playground.

    A custom example language for fenced code blocks was removed.

    You can customize this behavior with the new updateExample config option. For example you can use it to load examples from files:

    module.exports = {
      updateExample: function(props) {
        const { settings, lang } = props;
        if (typeof settings.file === 'string') {
          const filepath = settings.file;
          delete settings.file;
          return {
            content: fs.readFileSync(filepath),
            settings,
            lang,
          }
        }
        return props;
      }
    };

    Use it like this in you Markdown files:

    ```js { "file": "./some/file.js" }
    ```
    

    Remove webpack 1 support

    Webpack 2+ is required now.

    How to migrate

    1. Add a static modifier to all fenced code block with a language tag of js, jsx or javascript:

      ```js → ```js static

    2. (Recommended) Replace any fenced code blocks that have example language with fenced code blocks with a language tag of js, jsx or javascript:

      ```example → ```js

    3. (Recommended) Replace indented code blocks with fenced code blocks with a language tag of js, jsx or javascript:

       5.x:
      
       &lt;Button size="large"&gt;Push Me&lt;/Button&gt;
      

      6.x:

      &lt;Button size="large"&gt;Push Me&lt;/Button&gt;
      

    Commits

    The new version differs by 33 commits.

    • 1f6e5e4 v6.0.0
    • ff3bd08 Refactor: Remove unnecessary webpack options
    • 0b752e5 Fix: Remove OccurrenceOrderPlugin
    • 782ba3a Fix: Use uglifyjs-webpack-plugin
    • a7068f7 Chore: Update React
    • 826bcdb Chore: Update linters
    • c32c1bc Chore: Update deps
    • 3ba52f3 Chore: Update deps
    • eb216f6 Merge branch 'six'
    • d7a0da1 Docs: Spell check
    • 1915862 Docs: Use “interactive playground” everywhere.
    • 88724cd Docs: Update examples syntax
    • c944683 Docs: Few small tweaks
    • 5eeffe4 Chore: loaders → rules for webpack 2
    • c39ba15 Docs: Fix customized example

    There are 33 commits in total.

    See the full diff

    Not sure how things should work exactly?

    There is a collection of frequently asked questions and of course you may always ask my humans.


    Your Greenkeeper Bot :palm_tree:

    greenkeeper 
    opened by greenkeeper[bot] 8
  • Auto detect aspectRatio from image dimension

    Auto detect aspectRatio from image dimension

    I want to use the plugin in the gallery of pictures that have different linear dimensions. I would like the parameter 'aspectRatio' to automatically determine the ratio of the image and set the dimensions of the container not only (1/1). Is there such a built-in feature? Please give an example. Thank.

    opened by DmitryNakhimovich 6
  • Transitions way too slow

    Transitions way too slow

    having the image fading in over the course of 2.5 seconds is way too slow. the perceived load time for the user would make this feel clunky. it would be better to make the transition sub 1s by default, or give an option to customise the transition time

    enhancement 
    opened by BenWildeman 5
  • Fix non-boolean attribute `cover` error

    Fix non-boolean attribute `cover` error

    When using the prop cover, the browser throws the following warning in the console:

    index.js:1 Warning: Received `false` for a non-boolean attribute `cover`.
    
    If you want to write it to the DOM, pass a string instead: cover="false" or cover={value.toString()}.
    
    If you used to conditionally omit it with cover={condition && value}, pass cover={condition ? value : undefined} instead.
    

    This PR resolves this warning.

    bug 
    opened by tomasznguyen 4
  • Allow onload onerror handlers as props

    Allow onload onerror handlers as props

    I want to be able to detect when the image is finished loading or had an error loading so I can do something about it in my application. I propose adding optional onLoad and onError function props to the component, which get called respectively when the image has finished loading or has had an error loading.

    enhancement 
    opened by rizzlesauce 4
  • Missing onError and onLoad types

    Missing onError and onLoad types

    When https://github.com/TeamWertarbyte/material-ui-image/commit/d3a13f8e6b30b2466d9e2e360ed43908e6e2df33 got added, the types were not.

    I.e anyone using typescript will find that these methods are missing when in fact they are already implemented

    help wanted 
    opened by iJimmyWei 4
  • Bump url-parse from 1.5.1 to 1.5.3

    Bump url-parse from 1.5.1 to 1.5.3

    Bumps url-parse from 1.5.1 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump prismjs from 1.23.0 to 1.25.0

    Bump prismjs from 1.23.0 to 1.25.0

    Bumps prismjs from 1.23.0 to 1.25.0.

    Release notes

    Sourced from prismjs's releases.

    v1.25.0

    Release 1.25.0

    v1.24.1

    Release 1.24.1

    v1.24.0

    Release 1.24.0

    Changelog

    Sourced from prismjs's changelog.

    1.25.0 (2021-09-16)

    New components

    Updated components

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by rundevelopment, a new releaser for prismjs since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump tar from 6.1.0 to 6.1.11

    Bump tar from 6.1.0 to 6.1.11

    Bumps tar from 6.1.0 to 6.1.11.

    Commits
    • e573aee 6.1.11
    • edb8e9a fix: perf regression on hot string munging path
    • a9d9b05 chore(test): Avoid spurious failures packing node_modules/.cache
    • 24b8bda fix(test): use posix path for testing path reservations
    • e5a223c fix(test): make unpack test pass on case-sensitive fs
    • 188badd 6.1.10
    • 23312ce drop dirCache for symlink on all platforms
    • 4f1f4a2 6.1.9
    • 875a37e fix: prevent path escape using drive-relative paths
    • b6162c7 fix: reserve paths properly for unicode, windows
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Can you please support Martial UI v5?

    Can you please support Martial UI v5?

    opened by msalahz 6
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ws from 6.2.1 to 6.2.2

    Bump ws from 6.2.1 to 6.2.2

    Bumps ws from 6.2.1 to 6.2.2.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump dns-packet from 1.3.1 to 1.3.4

    Bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.8.8 to 2.8.9

    Bump hosted-git-info from 2.8.8 to 2.8.9

    Bumps hosted-git-info from 2.8.8 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.20 to 4.17.21

    Bump lodash from 4.17.20 to 4.17.21

    Bumps lodash from 4.17.20 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • See full diff in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ua-parser-js from 0.7.22 to 0.7.28

    Bump ua-parser-js from 0.7.22 to 0.7.28

    Bumps ua-parser-js from 0.7.22 to 0.7.28.

    Commits
    • 1d3c98a Revert breaking fix #279 and release as 0.7.28
    • 535f11b Delete redundant code
    • 642c039 Fix #492 LG TV WebOS detection
    • 3edacdd Merge branch 'master' into develop
    • acc0b91 Update contributor list
    • f726dcd Merge branch 'master' into develop
    • 383ca58 More test for tablet devices
    • 7c8aa43 Minor rearrangement
    • 09aa910 Add new device & browser: Tesla
    • 557cc21 More test for latest phones with unique form factor (fold/flip/qwerty/swivel)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v3.3.2)
  • v3.3.2(Apr 24, 2021)

    Thanks to the 2 contributors who made this release possible. :tada:

    Changed

    • Fix TypeScript types (#66) @tomasznguyen
    • Add React 17 to peer dependencies (#67) 7d3fab0 @tomasznguyen
    • Export prop type (#68) @estradanic
    Source code(tar.gz)
    Source code(zip)
  • v3.3.1(Dec 10, 2020)

    Thanks to the 1 contributor who made this release possible. :tada:

    Fixed

    • Fix console error for iconContainerStyle #62 #63 @yann-combarnous
    Source code(tar.gz)
    Source code(zip)
  • v3.3.0(Oct 7, 2020)

    Thanks to the 2 contributors who made this release possible. :tada:

    Added

    • Add a cover prop to make the image's object fit cover #60 @Cubxity

    Fixed

    • Fix error when loading SVGs from cache in Firefox #61 @grmlin
    Source code(tar.gz)
    Source code(zip)
  • v3.2.4(Sep 20, 2020)

    Changed

    • Include the event object in the onLoad and onError callbacks #46
    • Fix incorrect inheritance of the loading prop in the typescript definition #55
    • Fix image not being shown if it loaded before the component rendered for the first time (e.g. in SSR environments) #43 #51
    Source code(tar.gz)
    Source code(zip)
  • v3.2.3(Feb 13, 2020)

    Thanks to the 2 contributors who made this release possible. :tada:

    Changed

    • Fix peer dependency warnings #40
    • Update types to inherit img attributes #40
    • Add iconContainerStyle prop to types #42 @mestevens
    • Fix onClick, onLoad and onError types #38 #41 @iJimmyWei
    Source code(tar.gz)
    Source code(zip)
  • v3.2.2(Oct 5, 2019)

  • v3.2.1(Aug 18, 2019)

    Thanks to the 1 contributor who made this release possible. :tada:

    Changed

    • Replace the deprecated componentWillReceiveProps lifecycle method with getDerivedStateFromProps #35 #36 @ahmad-reza619
    Source code(tar.gz)
    Source code(zip)
  • v3.2.0(May 2, 2019)

    Thanks to the 1 contributor who made this release possible. :tada:

    Added

    • Add onLoad and onError props for callbacks that are invoked when the image was loaded or when loading the image failed #32 #33 @rizzlesauce
    • Add iconContainerStyle prop to allow customizing the style of the icon/loading spinner container #31
    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Jan 20, 2019)

    Added

    • Add a animationDuration property to customize the fading speed (default is 3000 ms) #27

    Fixed

    • Fix the animation timings (they actually didn't match the Material Design specification previously)
    • Fix clicking on the image not working #28
    Source code(tar.gz)
    Source code(zip)
  • v3.0.3(Nov 5, 2018)

  • v3.0.2(Nov 3, 2018)

  • v3.0.1(Oct 6, 2018)

  • v3.0.0(May 18, 2018)

  • v3.0.0-pre.7(Apr 20, 2018)

  • v3.0.0-pre.6(Mar 9, 2018)

  • v3.0.0-pre.5(Jan 4, 2018)

  • v3.0.0-pre.4(Nov 16, 2017)

  • v3.0.0-pre.3(Oct 21, 2017)

  • v3.0.0-pre.2(Oct 21, 2017)

  • v3.0.0-pre.1(Oct 19, 2017)

  • v3.0.0-pre.0(Oct 19, 2017)

    Ported to material-ui 1.0 beta

    Changed:

    • Random color is now pure white by default
    • You can specify the error icon node
    • You can spcifiy the loading node

    Removed:

    • Specific error icon stylings
    • Specific loading stylings

    Breaked:

    • Material UI 1.0 is required
    • Replaced onTouchTap with onClick handler
    • React 16 is required
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Oct 19, 2017)

  • v2.0.0(Oct 7, 2017)

    Added:

    • Aspect ratio to keep image in shape even after resizing. For a 16:9 image provide aspectRatio={(16/9)}

    Changed:

    • Replaced the refresh indicator with circular indicator

    Break:

    • If no aspect ratio is given it will fall back to 1:1. Please define one specifically otherwise your image will be a sqaure
    Source code(tar.gz)
    Source code(zip)
  • v1.4.1(Jul 6, 2017)

Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 72.2k Oct 13, 2021
A Material-UI File Upload Dropzone

A Material-UI File Upload Dropzone

pandemicode.dev 1 Sep 18, 2021
Free and Open Source Admin for Tailwind CSS and React based on Google's Material Design.

Material Tailwind Dashboard React Material Tailwind Dashboard React is a free Admin Template based on two popular front-end technologies: Tailwind CSS

Creative Tim 29 Oct 13, 2021
Material style image with loading animation

Material UI Image Images are ugly until they're loaded. Materialize it with material image! It will fade in like the material image loading pattern su

Wertarbyte 202 Sep 26, 2021
Introduce users to your app with this Material-style carousel.

Material AutoRotatingCarousel So you wrote a great app and deployed it and everything. But how do you introduce new users to your app? Well, the Mater

Wertarbyte 419 Oct 3, 2021
☄️React Material Admin is a React template built with Material-UI

React Material Admin — Material-UI Dashboard Template

Flatlogic 1.2k Oct 17, 2021
Stateless UI components for react that follow material design

Material Components Stateless UI components for react that follow material design. Introduction material-components is a library of React (15.0.0) use

Garth Williams 99 Sep 9, 2021
React Component that implements a speed dial using Material-UI.

react-speed-dial React Component that implements a speed dial using Material-UI. For Material-UI v1 use material-ui-speed-dial like inbox toolbox vers

Simon Mollweide 57 Oct 2, 2021
React Bootstrap with Material Design - Powerful and free UI KIT

React Bootstrap with Material Design Built with React and Bootstrap 4. Absolutely no jQuery. 400+ material UI elements, 600+ material icons, 74 CSS an

MDBootstrap 1.2k Oct 10, 2021
A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

admin-on-rest A frontend Framework for building admin applications running in the browser on top of REST services, using ES6, React and Material Desig

marmelab 400 Oct 12, 2021
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Oct 10, 2021
A customizable floating action button menu that follows material design

react-floating-button-menu A customizable floating action button menu Inspired by react-material-floating-button Install npm install --save react-floa

Alucard 33 Sep 1, 2021
Free React Typescript Admin Dashboard Template built with Material-UI

Tokyo Free White Typescript React Admin Dashboard Free React Typescript Admin Dashboard Template built with Material-UI This free and open source admi

Horia S 27 Oct 8, 2021
React 17 & Bootstrap 5 & Material Design 2.0 UI KIT

MDB 5 React React 17 & Bootstrap 5 & Material Design 2.0 UI KIT >> Get Started in 4 steps >> MDBReact 5 Demo 500+ material UI components Super simple,

MDBootstrap 1.2k Oct 10, 2021
React Material Design Icons – built with Pixo, Styled Components, and Styled System

React Material Design Icons Built with Pixo, Styled Components, and Styled System https://jxnblk.com/rmdi npm i rmdi // import icons individually for

Brent Jackson 132 Oct 19, 2020
Material design for react, powered by materializecss

react-materialize Material design components for react, powered by materializecss. Install npm install [email protected] npm install react-material

React Materialize 1.4k Oct 18, 2021
Lightweight CSS framework

Material Design CSS Framework MUI is a lightweight CSS framework that follows Google's Material Design guidelines. Use From the CDN: <link href="//cdn

null 4.5k Oct 12, 2021
Material Design component library for Mithril and React

Polythene Material Design component library for Mithril and React. Can be used as general-purpose component library that includes dialogs, cards, noti

Arthur Clemens 585 Oct 10, 2021
Material ripple effect. Ripples everything

react-ripples Material ripple effect, ripples everywhere Live Demo Attraction ✅ Zero dependencies ?? Tiny and blazing fast (Pure Component) ⚡ Typescri

Rocky Wu 177 Sep 19, 2021