I am trying to use the SplitText plugin of GSAP in React JS to make a text reveal animation but I am not able to import it in spite of installing gsap. I don't know where to import it from. I have tried import SplitText from "gsap/SplitText"; but I am getting a not found error. Please help me to understand how to properly install gsap along with its plugins in React JS.
I am trying to replicate this text reveal in my project : Click Here
Installed gsap-trial from npm and then import SplitText using import SplitText from "gsap-trial/SplitText" and then register the plugin using gsap.registerPlugin(SplitText); and now everything will work fine.
Related
When I have an error on my code, I see the mimified version of the code in the devtool of the browser.When working with plain js, it was easy to link the src of the js file not mimified, but now I use npm install, package.json, and I dont know how to specify to get the complete source. Especially with highchart and highstock in reactjs react-hichart
Instead of:
import Highcharts from "highcharts/highcharts";
import exporting from "highcharts/modules/exporting";
Use:
import Highcharts from "highcharts/highcharts.src";
import exporting from "highcharts/modules/exporting.src";
I am using a boilerplate Ignite Bowser and I am trying to add Knob Addon to storybook, but so far I cant make it to work.
On the story, I added a decorator like the following code:
storiesOf("Button", module)
.addDecorator(fn => {fn()})
.addDecorator(withKnobs)
However, when trying to add: "#storybook/addon-knobs/register" Im failing at it.
Some help would be nice.
Thanks
Project Overview
When running on React Native you need to install knobs from the on-device
Create a file named ./rn-addons.ts
Add the following import on the file:
import '#storybook/addon-ondevice-knobs/register'
Then in your file storybook.ts, you import that rn-addons:
import './rn-addons'
I'm new to React. Just trying out things.
So far I have been using CDNs for React, React-DOM, and React-Bootstrap. I had no trouble using components of React-Bootstrap using the example code below:
var Alert = ReactBootstrap.Alert;
Now my problem is I want to use a component that is not provided by React-Bootstrap so I tried to look for components available in Github. I found a lot of the components that I am looking for but all of them are available for installation via npm which I am avoiding since I'm using React thru CDN. I know it is recommended to use npm or create-react app, but that's not how I started my application.
So is there a way to import components like how I did in React-Bootstrap components? For example:
var Select = React.Select; // import Select from 'react-select';
I am new to React but have used React Native pretty extensively.
Basically I'm struggling with something that I expect is pretty simple and common.
I want to use an NPM package bootstrap-grid-only-css (https://www.npmjs.com/package/bootstrap-grid-only-css).
I have installed it and its available in the node_modules folder. My issue is trying to import it into the app.js file.
I have tried
import { 'bootstrap-grid-only-css' } from "bootstrap-grid-only-css"
and
import { 'bootstrap-grid.min.css' } from "../node_modules/dist/bootstrap-grid-only-css"
Have also tried
const bs = require('bootstrap-grid.min.css');
none of which seem to work. all error.
Can anyone advise the correct method of import please?
Thanks very much.
If you are importing css file, then do not include file name after import
import "../node_modules/dist/bootstrap-grid-only-css"/bootstrap-grid.min.css
Just like:
import 'react-tabs/style/react-tabs.css';
Its quite simple to add bootstrap to your react application. you can follow below steps according to React Docs Adding Bootstrap
As first step you need to add bootstrap to your project via npm install.
npm install --save bootstrap
you can add bootstrap version behalf of bootstrap in above code.
Then go to src/index.js file and import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning adding below line in index.js
import 'bootstrap/dist/css/bootstrap.css';
Then delete all custom css write inside the scr/App.css
Then checkout adding bootstrap code inside the App.js file.It should be worked properly.
If you want go through this video How to import bootstrap in react application you will understand how does it easy.
I try to implement slatejs package to my react app for creacting my custom editor,it works great,but hot-reloading stops working.
it stops when I do import into some component.I use webpack-dev-server+react-hot-loader
Firstly I supposed that the reason was my custom app settings ,but it didn't work for https://github.com/facebookincubator/create-react-app
and for https://github.com/davezuko/react-redux-starter-kit too
As I can understand slatejs package uses browserify,maybe this is the reason,but it shouldn't have an effect cause it's just a package and webpack settings for react-hot-loader exclude node_modules
Thank you!
I solved this issue,I don't know why but it helped.
const { Editor, Raw } = require('slate') // this import works with live-reload
import { Editor, Raw } from 'slate' // this import doesn't work with live-reload