I'm trying to use react-datepicker in a meteor 1.3 and react project.
Everything is working fine except that I don't have access to any of the css in the package. The readme says I need to require the css file from the package.
If I wasn't using meteor I could start the file with:
var React = require('react');
var DatePicker = require('react-datepicker');
var moment = require('moment');
require('react-datepicker/dist/react-datepicker.css');
Since this is meteor 1.3 I started it with
import React from 'react';
import DatePicker from 'react-datepicker';
import moment from 'moment';
I don't know how to require the css file. Can anybody explain this?
The only workaround I found was using relative paths inside an .scss file.
#import "./../../../../node_modules/react-date-picker/base.css";
#import "./../../../../node_modules/react-date-picker/theme/hackerone.css";
Ugly as f***, I know, but it works.
import 'react-datepicker/dist/react-datepicker.css'; worked!
Thanks #apendua
Related
I am new to React js. I want to implement "Content-Based Recommender" package using npm. After I downloaded it I could not import it. In documentation it said
const ContentBasedRecommender = require('content-based-recommender')
but it is for Node js i think. Can someone help me? Thanks
I really don't know that package, but all imports in React have these syntaxes
import ContentBasedRecommender from 'content-based-recommender'
or
import { ContentBasedRecommender } from 'content-based-recommender'
Like the title says, I'm in need of help knowing to import swiperjs. I'm fairly new to Javascript so I'm still learning the ropes.
I've already installed it via NPM and if you read the document is says "By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too". My problem and question is how and where? Do I go to configure them? Do I go inside Swiperjs core.js and configure it there or do I use my current app.js and add the import there? or make a new js file and do it there?
Thank you for taking the time to answer my question.
Ps: All I'm using is html, css, sass, javascript, Jquery as a framework and using Babel
You can import Swiperjs inside your app.js if that is your main file.
You import it with this code:
// core version + navigation, pagination modules:
import Swiper, { Navigation, Pagination } from 'swiper';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
// configure Swiper to use modules
Swiper.use([Navigation, Pagination]);
// init Swiper:
const swiper = new Swiper(...);
If anyone not using webpack then just use require
const Swiper = require('../../node_modules/swiper/swiper-bundle');
Note: correct the path of your node_modules folder. For me, nothing worked above.
I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})
You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.
you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))
The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?
I needed the FlipDown.js library for my project which uses Webpack.
I installed the library
npm i flipdown
But I don't know what should I do further to start working with the library.
How to import flipdown.css and flipdown.js to my style.less and index.js files, respectively?
Seems like flipdown.js does not have any default exports defined.
You could try the following;
index.js
import 'flipdown';
const countdown = new FlipDown();
console.log(countdown); // Is this what you expect it to be?
As for the styles:
#import 'flipdown/dist/flipdown.css`;
I want to import a js library(react-native-webview-bridge) in my react-native project.but my project use typescript,and the library is js.when i import it, it tips '[ts] connot find module react-native-webview-bridge'.so i want to know how to transfer js to typescript,or other way to deal it.thanks!
import * as WebView from 'react-native-webview-bridge'
from their GitHub i understand you need change the 'WebView' to 'WebViewBridge'.
** CommonJS style **
var WebViewBridge = require('react-native-webview-bridge');
** ES6/ES2015 style **
import WebViewBridge from 'react-native-webview-bridge';