Skip to content

hideControls property does not work. #500

Open
@bbjbc

Description

@bbjbc

Describe the bug
I want to remove the control bar at the top of the Chrono component.
So I searched the API and used the hideControls property, but it does not disappear.

To Reproduce
Steps to reproduce the behavior:

import { Chrono } from 'react-chrono';

const Timeline = () => {
  const items = [
    {
      title: 'January 2022',
      cardTitle: 'Event 1',
      cardSubtitle: 'Event 1 Subtitle',
      cardDetailedText: [
        'This is the first event on the timeline.',
        'And so on..',
      ],
    },
  ];

  return (
    <div className="w-full">
      <Chrono
        items={items.map((item) => ({
          ...item,
          cardDetailedText: item.cardDetailedText.map((text, index) => (
            <span key={index} className="text-sm">
              {text}
            </span>
          )),
        }))}
        mode="VERTICAL"
        hideControls
        theme={{ primary: '#4B5563', secondary: '#D1D5DB' }}
      />
    </div>
  );
};

export default Timeline;

As in the code above, I used the hideControls property properly. But it doesn't go away.

Expected behavior
If used, it will be a really simple and convenient component.

Screenshots
image

Desktop (please complete the following information):

  • OS - Windows
  • Browser - Chrome, Edge
  • Version - most recent version

Additional context
It is being developed using React.tsx and is being developed as a mobile first screen. Is this by any chance a problem?
hideControls="true", hideControls={true}
I tried both of the above but they didn't work.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions