Css not working for intro.js module in React - javascript

I have added Intro.js as below in one of my components:
import introJs from 'intro.js';
Then called it in componentDidMount
componentDidMount() {
introJs().start();
}
Element where I am using it at:
<div className={cx('dropDownSortingBlock')}>
{!isTrending && <div className={cx('dropDown')} data-intro={'Hello step one!'}>
However when i import css into a parent component
It doesn't render the component.
Update:
I tried using intro.js react wrapper and i have imported css directly into my file now.
However it just doesn't work
constructor() {
super();
this.state = {
showMessage: false,
type: '',
message: '',
stepsEnabled: true,
initialStep: 0,
steps: [
{
element: '.snapshotWrapper',
intro: 'Hello step',
},
{
element: '.snapshotWrapperNew',
intro: 'Hello Sort wrapper',
},
],
};
}
In render
<Steps
enabled={this.state.stepsEnabled}
steps={this.state.steps}
initialStep={this.state.initialStep}
onExit={this.onExit}
/>
Below is what shows up:

Because you're importing the css file from the package in node_modules , Add the ~ to your import in ListLandingPage.css :
#import "~intro.js/introjs.css";
see Import CSS from "node_modules" in Webpack
Or, import it in your component ( without the ~ ) :
import introJs from 'intro.js';
import 'intro.js/introjs.css';
Howerver, I would suggest you use the React wrapper around Intro.js for a React app.
they even have a code sandbox to get started

Please use react wrapper for intro.js.
npm install intro.js-react
also install intro js -- > npm install intro.js --save
then you can import css files from node modules like this below
import "intro.js/introjs.css"
themes are also available on the themes folder.(for eg: import "intro.js/themes/introjs-
nassim.css";)
Wrapper works similarly. Define steps / hints inside component. for that :-
import { Steps, Hints } from "intro.js-react";

Did you try https://www.npmjs.com/package/intro.js-react . It is a small React wrapper around Intro.js. The wrapper provides support for both steps and hints

Related

Material UI styles not working in component (warning: several instances of `#material-ui/styles`)

I've created a stand-alone React component that uses the Material UI (4.8.3) library and published this to a private NPM package in order that it can be used in a range of apps.
The stand-alone component project works fine (I'm using Storybook to test the component), but when I publish and then import the component into a new React project (created using create-react-app) I get the warning:
It looks like there are several instances of `#material-ui/styles` initialized in this application. This may cause theme propagation issues, broken class names, specificity issues, and makes your application bigger without a good reason.
The component renders on the page as seen below, but without any theming applied:
When it is clicked, any theming on the main React App is removed (note the dark blue bar in the background behind the menu has lost its color):
I'm using the Material UI withStyles functionality to theme my component, which I guess is the problem as my main React app is also using this, but this is the recommended way to apply to style. Does it feel like I need to somehow inherit an instance of the theme from the main host App?
My component project was created using create-react-library and so is using Rollup (0.64.1) and babel (6.26.3).
Here is the component:
import React, {Component} from 'react'
import { withStyles } from '#material-ui/core/styles'
const styles = theme => ({
root: {
fontSize: '14px',
}
})
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class MyComponent extends Component {
render() {
const { classes } = this.props
return (
<div className={classes.root}>Hello world</div>
)
}
}
export default withStyles(styles)(MyComponent)
Which is published to an NPM package and then imported into the main app using:
import React, { Component } from 'react'
import { MyComponent } from '#xxx/mycomponent'
const styles = theme => ({
root: {
display: "flex",
flexGrow: 1
}
});
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
// Class
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
class App extends Component {
//
// --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
render() {
//
const { classes } = this.props;
return (
<div className={classes.root}>
<MyComponent />
</div>
);
}
}
export default withRouter(withStyles(styles)(App))
I had the same issue, but I do not use StoryBook. This is the first link in Google, so I post my case here, as it might help.
This is the link on how to fix the alert, but it does not work for me. npm dedupe does nothing and I am unable to change config since I am using create-react-app.
So I did following:
Removed #material-ui/styles dependency from package.json
Ran npm i
Changed all import styles from '#material-ui/styles' to import styles from '#material-ui/core/styles'
I have an almost identical setup and ran into this exact issue when importing the components into a different project. I should mention that we're using webpack to build the app that's consuming the component. It was suggested to me to try the following in my webpackconfig:
module.exports = {
...
resolve: {
alias: {
"#material-ui/styles": require.resolve("#material-ui/styles")
}
}
}
This worked great for my case.
For reference: https://webpack.js.org/configuration/resolve/
You should link #material-ui/styles in your story book
so first need to npm link #material-ui/styles in your story book and than in your apps
Please try to install the below package. This helped resolve my issue.
npm i #mui/material

can't add npm package to nuxt js [vue-star-rating]

I'm new in nuxt js so when I try to add npm packages it won't work these are trials.
star-raing.js
import Vue from 'vue'
import StarsRatings from 'vue-star-rating'
Vue.use(StarsRatings)
nuxt.config.js
plugins: [{ src: '~/plugins/star-rating.js', mode: 'client' }],
build: {
/*
** You can extend webpack config here
*/
extend(config, ctx) {},
transpile: ['star-rating']
}
it shows these errors
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This
is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or
missing <tbody>. Bailing hydration and performing full client-side render.
[Vue warn]: Unknown custom element: <stars-ratings> - did you register the component correctly? For
recursive components, make sure to provide the "name" option.
found in
---> <Deals> at components/Home/Deals.vue
<Home> at pages/index.vue
<Nuxt>
<Default> at layouts/default.vue
<Root>
I had the same problem and here is the answer:
in your plugin (star-rating.js):
import Vue from 'vue'
import VueStarRating from 'vue-star-rating'
Vue.component('StarRating', VueStarRating)
note: You have to create 'star-rating.js' in your 'plugin'
folder
don't forget mode:'client' in your nuxt.config.js:
plugins: [
{
src: '~/plugins/star-rating.js', mode: 'client'
},
]
finally in your .vue file you can simply use :
<star-rating v-model="rating">
</star-rating>
ps: this is working for vuejs 2x
by the way if you want to get rating props you can simply access to it like this :
export default {
name:"example",
data() {
return {
rating: 0,
}
},
}
You should register it in your star-rating.js as follows:
import Vue from 'vue';
import StarsRating from 'vue-star-rating';
Vue.component('StarsRating', StarsRating);

How to Embed StencilJS components inside Storybook React App?

I'm trying to integrate Stencil and Storybook inside the same project. I've been following this set up guide and this one however one of the steps is to publish the library of components to NPM and that's not what I want.
I have this repo which I've configured with components library (src folder) and with the reviewer of those components with Storybook, which resides in the storybook folder.
The problem is that when I compile the components using Stencil and copy the dist folder inside the Storybook app and import the component nothing renders. Tweaking the configuration using custom head tags I was able to import it correctly however no styles where applied.
When I open the network panel there is some error when importing the component:
And thus the component is present in the DOM but with visibility set to hidden, which I think it does when there is an error.
This is the component au-button:
import { Component } from '#stencil/core';
#Component({
tag: 'au-button',
styleUrl: 'button.css',
shadow: true
})
export class Button {
render() {
return (
<button class="test">Hello</button>
);
}
}
Here is the story my component:
import React from 'react';
import { storiesOf } from '#storybook/react';
import '../components/components.js'
storiesOf('Button', module)
.add('with text', () => <au-button></au-button>)
These are the scripts inside the Storybook app:
"scripts": {
"storybook": "start-storybook -p 9009",
"build-storybook": "build-storybook",
"copy": "cp -R ./../dist/* components"
},
And the workflow is as follows:
Launch storybook
Make changes in the component
Execute build command
Execute copy command
Also, I would like to automate the developer experience, but after I solve this problem first.
Any ideas of what I could be doing wrong?
Sample for this could be found in the repo
https://github.com/shanmugapriyaEK/stencil-storybook. It autogenerates stories with knobs and notes. Also it has custom theme in it. Hope it helps.
I'm using #storybook/polymer and it's working for me really well.
following your example:
import { Component } from '#stencil/core';
#Component({
tag: 'au-button',
styleUrl: 'button.css',
shadow: true
})
export class Button {
render() {
return (
<button class="test">Hello</button>
);
}
}
the story would be:
import { storiesOf } from '#storybook/polymer';
storiesOf('Button', module)
.add('with text', () => <au-button></au-button>)
the scripts in the package.json:
"scripts": {
"storybook": "start-storybook -p 9001 -c .storybook -s www"
},
the storybook config file:
import { configure, addDecorator } from '#storybook/polymer';
const req = require.context('../src', true, /\.stories\.js$/);
function loadStories() {
req.keys().forEach((filename) => req(filename))
}
configure(loadStories, module);
and storybook preview-head.html you have to add to the body the following:
<body>
<div id="root"></div>
<div id="error-message"></div>
<div id="error-stack"></div>
</body>
I've been following this set up guide and this one however one of the steps is to publish the library of components to NPM and that's not what I want.
My reading of those guides is that they're stating “publish to NPM” as a way to have your files at a known URL, that will work most easily for deployment.
Without doing that, you'll need to figure out a different deployment strategy. How will you get the build products – the dist directory and static files – published so that your HTML will be able to reference it at a known URL? By choosing to diverge from the guidelines, that's the problem you have to address manually instead.
Not an insurmountable problem, but there is no general solution for all. You've chosen (for your own reasons) to reject the solution offered by the how-to guides, which means you accept the mantle of “I know what I want” instead :-)

React - '$' is not defined

I have a React Redux application. Im adding materialize as the CSS framework, but materialize requires jquery. So i installed Jquery and added it to my project via npm. If i import jquery like so
import $ from 'jquery';
No errors are thrown and im able to use it. But only on that component. So i added the wepback plug so i can call $ anymore in my react application. However, when i do this as described on webpacks website, it get the following error.
Line 13: '$' is not defined
Any ideas on why this is ?
app.js
import React from 'react';
import '../styles/index.css';
import Header from './header/Header';
class App extends React.Component {
constructor(props){
super(props);
console.log('Application ready');
}
componentWillMount(){
$('ul.tabs').tabs();
}
render = () => (
<div>
<Header />
<div>
{this.props.children}
</div>
</div>
)
}
export default App;
webpack.config.dev.js
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
'react-native': 'react-native-web',
jquery: "jquery/src/jquery" // What i added
// $: "jquery/src/jquery"
},
jquery is in the node_modules folder, from the npm install, i didnt add it to any other location.
You've aliased jQuery to the global variable jQuery, not $ - do alias: { $: 'jquery' }.
Wrong, this isn't what alias is for, see https://webpack.js.org/configuration/resolve/
Global variables in (browser) JS are really properties of window. So at the start of your script you could do
import $ from 'jquery';
window.$ = $;
and it'd be available globally after that. Including jQuery in its own <script> tag would do the same thing. But these are both un-webpack, a bit naughty, not modular. The 'correct' thing to do is import $ from 'jquery' in every file where you need it. Yeah this will be tedious if you need it in a lot of places, but it means you know where you need jQuery and where you don't, and if you removed all the components that used jQuery, jQuery would disappear as well.
To add on for Gatsby.js you can npm i jquery and then import jquery in gatsby-browser.js.
import 'jquery/dist/jquery.min';
import 'popper.js/dist/popper.min'; // for navbar animation
import 'bootstrap/dist/js/bootstrap.min';
import $ from 'jquery'; in the relevant files will then detect $

How to ignore raw loader for testing webpack

I have some components with svg's loaded inline using webpack raw loader e.g...
import React, { Component } from 'react'
import svg from '!raw!../assets/images/logo.svg'
export default class Logo extends Component {
render() {
return (<a href={this.props.url} dangerouslySetInnerHTML={{__html: svg}} />)
}
}
When trying to test these components server side using tape, they fall over. If I have css modules included, it is no problem, I can use css-modules-require-hook but svg's will not work. So I really need a raw loader require hook or something like that.
require('babel-register');
require('css-modules-require-hook/preset');
/* tests after this can import components with css includes */
I tried using isomorphic-ensure but this did not work.
require('babel-register');
require('css-modules-require-hook/preset');
require('isomorphic-ensure')({
loaders: {
raw: require('raw-loader'),
raw: require('react-svgdom-loader')
},
dirname: __dirname
})
I get the following error:
Cannot find module '!raw!../assets/images/
If you're not using webpack for your tests then you could use the ignore-styles module.
You may have to configure it if you plan to use it with css-modules-require-hook as it will also also ignore CSS files by default. e.g:
require('ignore-styles').register(['.svg'])

Categories