A simple, customizable, cover section composed from an icon, and a blurry background, which by default is the same as the icon.
npm install nice-coverimport React, { Component } from "react"; import Cover from "nice-cover"; class App extends Component { render() { return ( <Cover imageUrl={"https://images-platform.99static.com/8TVfQCr1NjZu5qLQE8WIJAE7pdk=/340x0:1288x948/500x500/top/smart/99designs-contests-attachments/90/90737/attachment_90737669"} /> ); } }Costumizing is done by overriding css.
optional attributes:
- coverStyle: overrides the cover style
- iconStyle: overrides the icon style
coverStyle override example:
<Cover imageUrl={"https://images-platform.99static.com/8TVfQCr1NjZu5qLQE8WIJAE7pdk=/340x0:1288x948/500x500/top/smart/99designs-contests-attachments/90/90737/attachment_90737669"} coverStyle={{ backgroundImage: 'url("https://contentgrid.homedepot-static.com/hdus/en_US/DTCCOMNEW/fetch/Category_Pages/Outdoor/Garden_Center/fruit-trees.jpg")' }} />will result in:
iconStyle override example:
<Cover imageUrl={"https://images-platform.99static.com/8TVfQCr1NjZu5qLQE8WIJAE7pdk=/340x0:1288x948/500x500/top/smart/99designs-contests-attachments/90/90737/attachment_90737669"} iconStyle={{ content: 'url("https://contentgrid.homedepot-static.com/hdus/en_US/DTCCOMNEW/fetch/Category_Pages/Outdoor/Garden_Center/fruit-trees.jpg")' }} />will result in:
Of course you can override any other style as well.
To play around more, take a look at the demo.