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.