node-vibrant package and react - javascript

People,
I´m trying to show the hex of a color inside a react Component with node-vibrant. (I have this node package installed)
It´s working when I run it with node from the console.
|- file.js
|- image.jpg
file.js
// I cannot make it work with ES6 importing
const Vibrant = require('node-vibrant');
let v = new Vibrant('image.jpg')
v.getPalette((err, palette) => console.log(palette.Vibrant.getHex()))
CMD:
node file.js
Result:
#2e5475
When I move that to my component...
import React, { Component } from 'react'
const Vibrant = require('node-vibrant');
class Hello extends Component {
helloPalette = palette => {
console.log(palette)
}
render() {
// I also tried here const Vibrant = require('node-vibrant');
return (
{
let v = new Vibrant('image.jpg')
v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))
}
)
}
}
export default Hello
I received the following error...
Error in ./src/Hello.js
Syntax error: C:/test/src/Hello.js: let is a reserved word (23:7)
21 | return (
22 | {
> 23 | let v = new Vibrant('image.jpg')
| ^
24 | v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))
25 |
26 | }
And...
If I change and move the var declaration to var v; below the function...
Failed to compile.
Error in ./src/Hello.js
Syntax error: C:/test/src/Hello.js: Unexpected token (10:4)
Or...
If I change and move the var before the return() as well nexpected token, expected ,
Can anyone provide light...? Does anyone use this or something similar with React...?
Will appreciate anyhelp.
Good weekend

You need to declare your object first and correct some syntax errors, THEN return it.
...
let v = new Vibrant('image.jpg')
return v.getPalette((err, palette) => this.helloPalette(palette.Vibrant.getHex()))

For people interested, you can use the react-palette package which does the job for you:
yarn add react-palette
And your code would look like this:
import Palette from 'react-palette'
<Palette image={IMAGE_URL}>
{palette => (
<div style={{ color: palette.vibrant }}>
Hello world
</div>
)}
</Palette>
The package uses node-vibrant under the hood thanks to an util function, so you can have a look at that if you are interested!

Related

How do I import framer-motion using dynamic import in NextJS?

I working with framer-motion in my NextJS project. I'm trying to import {motion} using Next's dynamic import. But unfortunately, it doesn't seem to work.
import { motion } from "framer-motion"
I'm trying to convert the above import as a dynamic import as given below:
const motion = dynamic(() =>
import("framer-motion").then((module) => module.motion)
)
But it throws an error :
"Argument of type '() => Promise<ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; } | ((<Props>(Component: string | ComponentType<Props>, customMotionComponentConfig?: CustomMotionComponentConfig | undefined) => CustomDomComponent<...>) & HTMLMotionComponents & SVGMotionComponents)>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'."
Whenever I import other things like icons, custom components it works as expected, for example the dynamic import given below works fine :
const DoubleArrowRightIcon = dynamic(() => import("#radix-ui/DoubleArrowRightIcon"), {
loading: () => <p>..</p>,
})
I have looked at other answers and found this link but still, not able to make it work.
Any help please?

Cannot import images from a sibling directory - React Native

I have tried many ways to get out of this problem.
I have a folder named Screens in which I have a file name HomeScreen.js
assets--
|__ padlock.png
Screens--
|__ HomeScreen.js
When I am trying to import padlock.png into HomeScreen.js it gives following error.
Unable to resolve module ./assets/padlock.png from D:\User\react\myproject\Screens\HomeScreen.js:
Following methods I have tried in HomeScreen.js
const imageLock = require("../assets/padlock.png"); //Not working
const imageLock = { uri: "../assets/padlock.png" }; //Not Working
import imageLock from "../assets/padlock.png"; //not working
I have make sure that padlock.png exist and I am not making any mistakes. Full error message is as below.
Unable to resolve module ./assets/padlock.png from D:\User\react\myproject\Screens\HomeScreen.js:
None of these files exist:
padlock.png
Screens\assets\padlock.png\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
27 | const imageLock = require("../assets/padlock.png");
| ^
28 |
29 | export default function HomeScreen({ navigation }) {
30 | const [modalOpen, setModalOpen] = useState(false);
Did you try
<Image
style={{ width: 100, height: 100 }}
source={require('../assets/padlock.png')}
/>

How to dynamically import React JSX Component; SyntaxError: Unexpected Token

How can I dynamically import a file containing JSX and have it be transpiled like a regular import?
I'm trying to dynamically import() this React component:
import React from 'react';
export default () => {
return (
<div>Test</div>
);
}
from a service in my application:
import('./test').then(({default: Component}) => {
callback(Component);
});
but it appears the dynamic import doesn't transpile the JSX:
SyntaxError: /path/to/test.js: Unexpected token (5:4)
3 | export default () => {
4 | return (
5 | <div>Test</div>
| ^
6 | );
7 | }
8 |
I have plenty of regular imports which work fine:
import OtherComponent from './OtherComponent';
export default () => (
<OtherComponent />
);
so Babel is definitely transpiling those... just not the dynamic ones.
Looking at the build output from yarn build, I can see a chunk is created but it simply contains this error (implying the file cannot be transpiled at build time ?!?):
(window["webpackJsonptest-app"]=window["webpackJsonptest-app"]||[]).push([[0],{272:function(m,e){throw new Error('Module build failed (from ./node_modules/babel-loader/lib/index.js):\nSyntaxError: /path/to/build/test.js: Unexpected token (12:2) ... etc

Query Strings with React for a small weather app

I want to be able to set a city for my weather app using query-strings like ?latt_long=34.052235,-118.243683&&woeid=2442047. Here is a link to it https://github.com/rushingMarina/weather-react-app . Right now I have a cities.json file in my project and App.js fetches data about the cities from there. I can not seem to figure out how to use query-strings. On https://www.npmjs.com/package/query-string it tells me to use const queryString = require('query-string'); in order to use query-strings but I can not declare a const in my App.js.
My App.js:
import React, { Component } from "react";
import FrontSide from "./FrontSide";
import BackSide from "./BackSide";
import "./panel.css";
import cities from "./cities.json"
import queryString from 'query-string';
class App extends Component {
const queryString = require('query-string'); //I get unexpected token error (11:6) on this line right before queryString
console.log(location.search);
state = {flipped: false, currentCity: cities[0]};
onFlip =() => {
this.setState({flipped: !this.state.flipped});
};
onSelectCity = (city) => {
this.setState({currentCity: city})
}
render() {
return (
<div className={`panel ${this.state.flipped ? 'flip' : ""}`}>
<div className="panel-front">
<FrontSide onClick={this.onFlip} currentCity={this.state.currentCity}/>
</div>
<div className="panel-back">
<BackSide
cities={cities}
onClick={this.onFlip}
currentCity={this.state.currentCity}
onSelect={this.onSelectCity}
/>
</div>
</div>
);
}
}
export default App;
My cities.json
[
{
"title":"Los Angeles",
"location_type":"City",
"woeid":2442047,
"latt_long":"34.052235,-118.243683"
},
{
"title":"San Diego",
"location_type":"City",
"woeid":2487889,
"latt_long":"32.715736,-117.161087"
},
{
"title":"New York",
"location_type":"City",
"woeid":2459115,
"latt_long":"40.730610,-73.935242"
},
{
"title":"Chicago",
"location_type":"City",
"woeid":2459115,
"latt_long":"41.881832,-87.623177"
},
{"title":"St Petersburg",
"location_type":"City",
"woeid":2123260,
"latt_long":"59.932739,30.306721"
}
]
i tried declaring
const queryString = require('query-string');
but react shows unexpected token at "queryString"
Please refer to my github link, there you will find App.js and cities.json files
I expect to get information about the city to display on my FrontSide from URL query-string like.
This is the error I am getting:
Failed to compile.
./src/App.js
Syntax error: Unexpected token (11:6)
9 | class App extends Component {
10 |
> 11 | const queryString = require('query-string');
| ^
12 | console.log(location.search);
13 |
14 | state = {flipped: false, currentCity: cities[0]};
Just remote the const queryString = require('query-string'); line out of the class declaration and put it on top. Just right below the import statements and everything should work fine. React doesn't like require statements inside the class declaration

Importing Editor from draft-js-plugins-editor causes TypeErrors on empty project

I've created a new React project in Webstorm. I've installed draft-js and draft-js-plugins-editor, along with the plugins draft-js-hashtag-plugin and draft-js-mathjax-plugin (Using node).
I've following their 'getting started' on their Github, however the example doesn't work for me. As soon as I write
import Editor from 'draft-js-plugins-editor';
I get an TypeError: Cannot read property 'object' of undefined error.
./node_modules/draft-js-plugins-editor/lib/Editor/index.js
node_modules/draft-js-plugins-editor/lib/Editor/index.js:177
174 | }(_react.Component);
175 |
176 | PluginEditor.propTypes = {
> 177 | editorState: _react2.default.PropTypes.object.isRequired,
178 | onChange: _react2.default.PropTypes.func.isRequired,
179 | plugins: _react2.default.PropTypes.array,
180 | defaultKeyBindings: _react2.default.PropTypes.bool,
My minimal example code:
import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor'; // Error upon doing this
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import { EditorState } from 'draft-js';
const hashtagPlugin = createHashtagPlugin();
const plugins = [
hashtagPlugin,
];
export default class MyEditor extends Component {
state = {
editorState: EditorState.createEmpty(),
};
onChange = (editorState) => {
this.setState({
editorState,
});
};
render() {
return (
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
/>
);
}
}
This error appears because of you use the latest (16th) version of React.js. In this blog post (announce of React.js version 16) you can read:
The deprecations introduced in 15.x have been removed from the core
package. React.createClass is now available as create-react-class,
React.PropTypes as prop-types...
All old packages which still accessed React.PropTypes will be broke if you use these with React 16.
If you want to use draft-js-plugins-editor you must downgrade your react version to version 15. For example, for npm use this command
npm install react#15.4.2 --save
or this for yarn:
yarn add react#15.4.2

Categories