First please bear with me. I do not think that this question is appropriate for Stack Overflow. I first tried to ask this question in the official GitHub repository of this project, but they strongly suggest to ask question in Stack Overflow with corresponding tags, so here I am...
The point is that is strange for me that I can not find official documentation and examples of Fluent UI React Charting components in the official website of Fluent UI React, even though the official NPM package is public and is being constantly updated.
To be fair, I found this website but It looks outdated. Any help will be much appreciated.
Potentially this can help you.
clone the repo
git clone git#github.com:microsoft/fluentui.git
then navigate to the charting folder, and install the deps (they use yarn by the looks of things)
yarn install
then start storybook
yarn start
You'll see this.
Storybook will cover the components inside the lib from what I can see, in terms of what they have on offer. That being said they still don't document the props & how to configure the components... but you should be able to sift through the storybook code to see how they got the charts to render inside storybook at least.
Not the best documented library ever... but perhaps that can get you going :)
Related
I am trying to render 3D files in my react project. I am using ThreeJS for my react project of version 16.13.1. After installing #react-three/fiber & #react-three/drei these packages, I am getting error of Module not found: Can't resolve 'react-dom/client'. After searching solution for this I get to know that for these we have to upgrade React version to 17 or above. I did it in demo project & it worked. But the restriction is that I can not update actual project version from 16 to 18 as it will change or break so many things as well as I have to take care of other dependencies. Is there any solution available for using ThreeJS with React v16.
Or if there is any other way or different packages available to render 3D files (like .glb, .gltf) please share with me.
Thank you in advance.
How to find a version of a library that supports particular version of react?
Google <library-name> npm
Go to npm page
Go to repository (usually github)
Open package.json
Check version of react; if it's matching your version go to 7.
Change tag to some previous version; go to 5.
#react-three/fiber & #react-three/drei for react 16.13.1
These two should work:
#react-three/fiber 4.2.21
#react-three/drei 3.2.0
npm install #react-three/fiber#4.2.21 #react-three/drei#3.2.0
Disclaimer
You can never know if the packages work without trying. Many things changes and bug fixes only apply to the newest versions.
I found one package react-3d-viewer to render 3D files which perfectly work for me.
Google model viewer also works and it comes with variety of props which is good for customization of rendered 3D model.
https://github.com/dwqdaiwenqi/react-3d-viewer
https://modelviewer.dev/docs/index.html
I am working in a monorepo which has been in development for a few years. The codebase is big and it is very hard to find components which are no longer in use. I did analyze the codebase with webpack bundle analyzer, but the report is not that helpful. We are trying to move them in a folder called deprecated. We tried to move unused react components manually, as much as possible but the process is very time consuming and fragile.
I am wondering is there any other tool or techniques that make finding these unused react components easy.
Any suggestions are appreciated.
there is a npm package called "react-unused-components" it can help
link : https://www.npmjs.com/package/react-unused-components
or you can take look into following repo
git : https://github.com/CVarisco/delete-react-zombies
reddit link : https://www.reddit.com/r/reactjs/comments/7z6bo0/cli_to_search_and_delete_unused_components_in/
I do have some components I use across my projects so I thought it was a good idea to build my own React UI lib, but how?
Do I create a SPA using CRA and start coding and listing the components on it?
Yep, it’s one way to start.
But if you want to publish it or organize it to have a better use of it, I suggest you use Storybook as your dev environment and Jest + ESlint.
There’s some boilerplates like React AZap to help you with that.
I built React AZap to be an easy to use React UI lib boilerplate.
It uses Storybook and stories to organize your components, it has a component generator using Plop, tests with Jest+Enzime and styles with styled-components.
Try it out, it can save you time to start your lib ;)
Using CRA won't help you, as you won't be running this project.
Creating a library of components is the same as creating any other npm package, the only difference is that it should export components instead of normal functions/objects.
There are plenty of guides online that you can consult if you want more in-depth explanation.
I'd recommend giving this guide a read, which goes into the details for how to structure a multi-package UI component library. The code is included as well, so you should be able to clone to repository and get started.
Hope that helps!
I want to use my UI components as a reusable seperate repo/project for my react-native iniit App.
So i creatd a seperate project folder like this
and installed these dependencies
and few dependencies externally with my other app.
Then i used
yarn link
to link this project to my working app as a module just like a node module. but i get this error when i try to run my app?
Is there an issue with my method, or is there a sure way i can try to reach my goal because i found multiple ways and various configuration of creating such component libraries.but i didn't use any since the end goal is different.
This is a known issue with the React Native packager. See this discussion: https://github.com/facebook/react-native/issues/637.
This may have to do with using watchman, although there seem to be a few different cases where this can crop up.
TL;DR: React Native packager does not respect symlinks to projects, so npm and yarn link do not work like you would expect them to. Apparently this is being resolved in metro-bundler: https://github.com/facebook/metro-bundler/issues/1.
Unfortunately the workarounds are not that pretty, but there are a few options discussed in the issue 637 discussion. It also looks like you may be using a github repo for your package.
You could tell npm to get your library from github via your project's package.json, so you probably do not need npm link, though you will not be able to link to your local files for your module this way.
I'm trying out Google's Material Design stuff, and there's something I'm having a problem with that you guys might be able to help.
I want to have a different theme per "major" module in my app.
I tryed using
$mdThemingProvider.theme('default');
In the config of each module, but I'm getting that theme is undefined. The only methods available are setDefaultTheme and alwaysWatchTheme
I'm using the latest stable release as I just installed via
bower install angular-material --save
Can you guys spot what I'm doing wrong?
UPDATE:
So I posted an issue on github and found my problem (the documentation online is for the master branch not the stable branch
https://github.com/angular/material/issues/1039
But I'm still trying to figure out how I can assign different themes to different modules
Looking further down the strand of the issue you posted to github, I noticed the suggestion to update your version of angular-material in bower.json.
"angular-material": "0.7.0-rc1-master-84842ff"
This worked for me and now I'm able to define my own theme just like was specified in the docs.
$mdThemingProvider.theme("customTheme").primaryColor("pink").accentColor("green");