Where to learn the react documentation?

[jass-trix]

I'd like to know how do i know how to edit / manipulate the react file for instance, the sidebar. is there any available documentation to know which file to change and what kind of property to use?

[jaceksieja]

Hey, did you see README.md file? https://github.com/mrholek/CoreUI-React/tree/master/React_Starter ? It's isn't enough?

[nolawnchairs]

It's too much - I started reading it and it gave me a headache.

I think what the OP was asking (and what I'm asking for) is documentation - there doesn't seem to be any API that I can find. Example for adding a component to my render() method:

import {Sidebar} from "core-ui";

However, this is not working... however, this was an educated guess - because there is no API documentation on how to import components, their prop types, etc.

[code-beans]

Not that I want this to turn into a rant but the lack of documentation (that I found) gives me a headache to use this ui framework to the point where I just want to drop it.

The documentation on http://coreui.io/docs/getting-started/introduction/ tells me all about what React is, what Bootstrap is, what the layout looks like, etc.

But nothing on how to actually use this ui-framework. The getting started guide doesn't get you started at all with CoreUI-React. Take just the sidebar for example. How do I add an item to the sidebar? How do I have to route properly? Which files should be affected? What options do I have for the sidebar (badges, icons, etc.)? Can I add a component without having it appear in the sidebar?

So far the only way to get started was to have both the full project and starter project open and look where things are different.

The documentation is missing a guide on how to implement a couple of views properly using the provided components.

Maybe somebody can point me into the right direction.

[larsdekock]

Amen to that. I've been wasting two hours doing exactly what code-beans is describing, i.e. trying to compare full project to the starter project. But I am unable to add an item to the sidebar and cannot find any documentation. Can anyone help?

[xidedix]

hi @larsdekock @code-beans

How do I add an item to the sidebar?

Sidebar is populated from an array of items: https://github.com/mrholek/CoreUI-React/blob/be9e2abe03e03fa98ac6058f97700ed4477f233b/React_Starter/src/components/Sidebar/_nav.js#L1-L13

for nested items add some children to parent item: https://github.com/mrholek/CoreUI-React/blob/be9e2abe03e03fa98ac6058f97700ed4477f233b/React_Full_Project/src/components/Sidebar/_nav.js#L188-L209

if you need divider or title, simply add to items array: https://github.com/mrholek/CoreUI-React/blob/be9e2abe03e03fa98ac6058f97700ed4477f233b/React_Full_Project/src/components/Sidebar/_nav.js#L219-L225

I'll try to answer some of your questions later this week, but I hope this helps for now.

[xidedix]

What options do I have for the sidebar (badges, icons, etc.)?

• title:

  {
  title: true,
  name: 'Theme',
  class: ''              // optional class names space delimited list for title item ex: "text-center"
  wrapper: {             // optional wrapper object
  element: '',         // optional valid HTML5 element tag
  attributes: {}       // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
  },
  },

• item:

  {
  name: 'Dashboard',
  url: '/dashboard',
  icon: `icon-speedometer',
  class: '',                    // optional
  variant: 'success',           // optional
  badge: {
  variant: 'info',
  text: 'NEW', 
  class: ''                   // optional
  }
  },

• item with children array - works like nav-dropdown-toggle with nav-dropdown-items

  {
  name: 'Icons', 
  url: '/icons',
  icon: 'icon-star',
  children: [
  {
    name: 'Flags',     // item options apply
    url: '/icons/flags',
    icon: 'icon-star',
    badge: {
      variant: 'success',
      text: 'NEW'
    }
  },
  ]
  }

• divider:

  {
  divider: true
  },

• order of precedence:

  title > divider > children > item

[xidedix]

Which files should be affected?

sidebar: src/components/Sidebar/_nav.js

breadcrumb routes: src/routes.js index routes: src/index.js container routes: src/containers/Full/Full.js

[nomoney4me]

I am attempting to add a class in this but it doesn't look like it's taking affect: { name: 'Reports', url: '/report', icon: 'icon-pencil', wrapper: { element: '', attributes: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"} }, children: [ { name: "Office Count", url: "/report/officecount", icon: 'icon-chart' }, { name: "Latest Users", url: "/report/latestusers", icon: 'icon-user-follow' } ], },

Are there certain fields that are also "required"? I might have missed it but I don't see anything mentioned about this in the documentation.

[xidedix]

@nomoney4me wrapper.element is required when passing attributes.

[nomoney4me]

@xidedix I'm also trying to do this:

{
  name: 'Tools',
  wrapper: {
    element: 'div',
    attributes: { className: "under-construction" },
  },
},

Firefox's dev tool shows no changes to the element nor its class name. Any ideas?

[xidedix]

@nomoney4me at the moment wrapper works for title: true only

{
  title: true,
  name: 'Tools',
  wrapper: {
    element: 'div',
    attributes: { className: "under-construction" },
  },
},

[gardheamsantos00]

@xidedix how i can change the font awesome for version 5.x , i need use in tag ( icon : 'fas fa-cow' ) for exemple, but version 4.x dont have animal icons. thx

[rodrigocnascimento]

@xidedix how i can change the font awesome for version 5.x , i need use in tag ( icon : 'fas fa-cow' ) for exemple, but version 4.x dont have animal icons. thx

You just hae to remove the old fontawesome npm uninstall fontawesome then add the new version: npm install @fortawesome/fontawesome-[free] and reference in App.scss ~> @import '~@fortawesome/fontawesome-free/css/all.min.css';

[YioGoi]

I can not add class to parent item if it is 'nav-dropdown'

Can you explain how to add custom class or id to the items which are parent and not title: true

[wasseemzaher]

Can somebody shed some light on how to structure projects with coreUI for react? I know there isn't a one method fits all but this is my first project with coreUI and I'm not sure where to start. if you can provide an example of a real life project that shows the relation between CoreUI and your project that would be very helpful.

Any tips about integrating coreUI in a React project would be great too. for example:

1. should I be deleting coreUI files that i don't need in my project?
2. how exactly to use the file _nav.js ?
3. should I open a new separate project that have my application code inside the CoreUI project?
4. what is the DefaultLayout.js exactly for? should I be editing this file?
5. In general, do you guys copy the template files to a parallel folder, or you delete the component file you don't want to use and edit the rest, basing your project on the existing coreUI project?

I'm confused. documentation doesn't mention anything about how to do any of this.

[xidedix]

Hi @wasseemzaher At the start, we thought the template was self-explanatory. Apparently, it's not, and it lacks proper docs. We are working hard to bring the new CoreUI v3 for React with full-blooded documentation.

In the meanwhile, a good starting point is README file.

• There you can find somewhat important information that this project was bootstrapped with Create React App and inherited its structure.
• Navigation works with React Router. Routes definition: src/routes.js
• There is a separate README for CoreUI components library
• CoreUI v2 for React uses Reactstrap components.
• Last but not least - you’ll need to have Node.js and npm installed on your local development machine.

1. You can delete unnecessary files as long as you know what you are doing.
2. File _nav.js defines config object for the SidebarNav component
3. Read Create React App docs.
4. DefaultLayout.js defines template structure: Header, Footer, Sidebar, Aside, Breadcrumbs and main view. Keep the structure, change everything else.
5. All you have to do:
   • create view components (or edit existing ones) in src/views
   • define routes src/routes.js
   • define _nav.js
   • the rest depends upon the type of your project

HTH

[woothu]

Version 3 of the library received a new documentation site: https://coreui.io/react/docs/

[syed-afzal]

Ther is still no proper documentation provided for CSidebar in the documentation link for React JS https://coreui.io/react/docs/

Any help would be appreciated

[syed-afzal]

@xidedix can you tell me where and how to understand the meaning of terms which are used in _nav.js ?

And in what order I can customize my sidebar, because still I find no example in the documentation

https://coreui.io/react/docs/components/CSidebar/

[ahmadsdn]

The poor and limited documentation of the framework made us abandon it all together. It was causing us much pain and provides nothing special besides a sidebar.