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'
Related
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.
I'm currently working on an application using preact, tailwindcss and vite. Unfortunately, importing svgs seems to be a bit problematic.
There is a separate repository that only contains the svg resources.
My original plan was to just import them as components as I was used to do it in classic react with webpack applications using SVGR and the following syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
This won't work for (at least) two reasons. One being preact the other one being the lack of SVGR.
I then proceeded to give vite-plugin-svgr a try by importing it in my vite.config.js.
plugins: [svgr({ svgrOptions: { jsxRuntime: 'classic-preact' } }), preact(), tsconfigPaths()],
It kinda works using the following import syntax:
import Search from 'assets/icons/search-lg.svg?component';
Unfortunately this raises the following error which I couldn't manage to work around besides ignoring it which is not really an option:
TS2307: Cannot find module 'assets/icons/search-lg.svg?component' or its corresponding type declarations
The alternate plan would now be to create a wrapper component that just imports the svg from the given path and create a component from it myself. This would also simplify styling it with tailwind.
Unfortunately I fail to import the file in a way I can wrap it with <svg> tags. Using <img> is not really an option because I need to be able to manipulate the svg.
So, does anybody have an idea how to either
correctly use the component import in my setup
create a preact component that imports an svg from a file and still is customizable
Thanks in advance!
I finally got it to work by using vite-plugin-svgr. In the end adding /// <reference types="vite-plugin-svgr/client" /> to vite-env.d.ts made the compiler happy.
I can now use the good 'ol syntax:
import { ReactComponent as Search } from 'assets/icons/search-lg.svg';
Thanks to #user-28 for pointing me in the right direction!
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