leonardokl / react-palette Goto Github PK
View Code? Open in Web Editor NEWExtract prominent colors from an image
Home Page: https://leonardokl.github.io/react-spotify-background
react-palette's People
Contributors
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Stargazers
Watchers
Forkers
intcastillo andrewrt tudor-ghiorghiu pauromeropau sorvereign doc22940 qburnsfb johnbra yannoudou yasamanloghmani alwan-h brayoh olros truefirel rrenteria-dev tadinski juvoni boekenenbroeken sanengineer artifact-io confuser 1997roylee rawdevx21 coteries barionleg melissamclreact-palette's Issues
How to set state with this library ?
How to set state with vibrant colors with this library ?
Images loaded twice (in my carousel)
I have a react-slick carousel loading a couple of images.
I noticed that as soon as I add
const { data, loading, error } = usePalette(url);
to my code, images are loaded twice.
This can easily be witnessed/tested on that page
https://codesandbox.io/s/react-slick-with-palette-53j28
by commenting out (or activating) line 19 (with usePalette, at this time of writing)
Is it a known issue and how can I prevent this ?
Thank you !
How to use this with async hooks
How do I use react-palette with async hooks? I keep getting this error:
Warning: Can't perform a React state update on an unmounted component. This
is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in
a useEffect cleanup function.
error: TypeError: Cannot read properties of undefined (reading 'filters')
using the react-palette in a development environment works perfectly, but when launching the project in build (either in vercel or netlify) Errors happen and I can't return the date, returning the following error: (Note: I put a console.log (palette))
{
data: {}
error: TypeError: Cannot read properties of undefined (reading 'filters') at new e (https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:251:29349) at Function.e.from (https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:251:41486) at tL (https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:252:20816) at https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:252:21370 at Qg (https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:34:6586) at e.unstable_runWithPriority (https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:19:3794) at hr (https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:30:38587) at Jt (https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:34:6055) at https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:34:5969 at pe (https://pocketdex-9o3qcosrx-andersonpgs.vercel.app/assets/index.2529a016.js:19:2851)
loading: false
}
being that when I'm in a development environment running the "npm run dev" the project works perfectly, returning in the console.log (palette):
data: {vibrant: '#46e5f6', lightVibrant: '#e46889', darkVibrant: '#08313e', muted: '#866c9c', lightMuted: '#bcc4c4', …}
error: undefined
loading: false
what can I do to solve this?
Build time error when using inside Gatsby project.
Its being called recursively
const MaskCustomization = (props) => {
const classes = useStyles()
const { file } = props
const imageUrl = validateAndCreateImageObject(file)
const { data } = usePalette(imageUrl)
console.log('here')
return (
<Paper className={classes.paper}>
<Grid item container xs={12}>
<Grid item xs={4}>
<Paper className={classes.paper} style={{backgroundColor: data.vibrant}}>xs=12</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper} style={{backgroundColor: data.vibrant}}>xs=12</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper} style={{backgroundColor: data.vibrant}}>xs=12</Paper>
</Grid>
</Grid>
</Paper>
)
}
I am using this library in the above way and its being called recursively. Please advise.
Can't perform a React state update on an unmounted component
import { Palette } from 'react-palette';
{Json.map((link) => (
<Palette src={link.image || 'https://image.flaticon.com/icons/png/512/147/147144.png'}>
......
</Palette>
))}
Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
Update node-vibrant
Hey :)
The author of node-vibrant is actively maintaining his repo again and they fixed some annoying bugs (e.g. the canvas element gets created multiple times). Would be cool if you could update and test react-palette with the latest version.
Thanks!
Edge browser error with a certain image
I got an error in Edge browser with a certain image. Never any other image for the last few months. I update a background image in my application once a day from bing.
This image gives me
[object DOMException]: {code: 1, message: "IndexSizeError", name: "IndexSizeError"}
This is the image: https://www.bing.com/th?id=OHR.ZionBirthday_EN-US2681531368_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp
I am just bypassing it by adding a default color if this fails, but thought I would report it.
Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
I looked into above error and it seems its because of update in node-vibrant module , is there any solution available from react-palette
Cannot import Palette
If you are having this issue, just try doing this:
import { Palette } from 'react-palette';
instead of this:
import Palette from 'react-palette';
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.