Creating custom Card component - how do I access internal components?

[i2chris]

Hi

I appreciate this is not really a react-trello issue :-)

How would I use the existing components within my custom Card component?

Doing this doesn't work:

import {
  MovableCardWrapper,
  CardHeader,
  CardRightContent,
  CardTitle,
  Detail,
  Footer
} from "react-trello/styles/Base";
import Tag from "react-trello/Card/Tag";
import DeleteButton from "react-trello/widgets/DeleteButton";

class MyCard extends Component {

It gives me this error:

Module not found: Error: Can't resolve 'react-trello/Card/Tag' in '/home/chrisr/code/work/lims2/app/javascript/components/tracking'

Any help you can give is appreaciated,

Thanks

[dapi]

Try import Tag from "react-trello/Tag”;

[jaypitti]

I would a appreciate a demo on a custom card as well, even if i use their Card.js file unedited besides name and export I cant get them to render

[krishnaBharadwaj]

Is there some sort of documentation which gives a simple yet complete example of how to customize a component? I have been trying to replicate what has been done in the storybook example to create custom card that doesn't have the delete button. Can't seem to find the right way to import internal components.

import { MovableCardWrapper } from "react-trello";

Produces the following error:

"Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

[garimahans15]

Is there a way to add a Tag to a custom Card? , Adding tags property under the card object doesn't work directly??? @rcdexta

tags: [ { bgcolor: 'red', color: 'white', title: 'Critical' }, { bgcolor: '#0079BF', color: 'white', title: '2d ETA' } ]

[kenzan100]

adding dist between react-trello and the following paths worked.

for example

import {
  MovableCardWrapper,
  CardHeader,
  CardRightContent,
  CardTitle,
  Detail,
  Footer
} from 'react-trello/dist/styles/Base'

import InlineInput from 'react-trello/dist/widgets/InlineInput'
import Tag from 'react-trello/dist/components/Card/Tag'
import DeleteButton from 'react-trello/dist/widgets/DeleteButton'