Customizing Timeline Points
A Timeline Point is the visual marker on the timeline track that represents an individual event or moment. React Chrono offers several ways to customize the appearance of these points.
Supported Shapes
You can change the shape of the timeline points using the timelinePointShape
prop. The available built-in shapes are:
circle
(Default)diamond
square
Set this prop on the <Chrono>
component:
<Chrono items={items} timelinePointShape="square" />
Adjusting Dimensions
The size of the timeline point can be modified using the timelinePointDimension
prop. This prop accepts a numerical value representing both the width and height of the point in pixels.
<Chrono items={items} timelinePointDimension={20} /> // Sets point size to 20x20 pixels
The default dimension is typically around 16px
, but this can vary slightly based on theme or specific version.
Using Custom Icons as Timeline Points
If the built-in shapes are not sufficient, you can use custom icons (e.g., images, SVGs) as timeline points. This provides maximum flexibility for visual customization.
For detailed instructions on how to implement custom icons, please refer to the Custom Timeline Icons documentation page.
Example: Combining Shape and Dimension Customization
Here’s an example showing how to set both the shape and dimension for timeline points:
import React from "react";
import { Chrono } from "react-chrono";
const sampleItems = [
{
title: "Event A",
cardTitle: "Card for Event A",
cardSubtitle: "Subtitle A",
cardDetailedText: "Details for event A.",
},
{
title: "Event B",
cardTitle: "Card for Event B",
cardSubtitle: "Subtitle B",
cardDetailedText: "Details for event B.",
},
{
title: "Event C",
cardTitle: "Card for Event C",
cardSubtitle: "Subtitle C",
cardDetailedText: "Details for event C.",
},
];
function CustomizedTimelinePoints() {
return (
<Chrono
items={sampleItems}
mode="VERTICAL_ALTERNATING"
timelinePointShape="diamond" // Set points to be diamonds
timelinePointDimension={24} // Set point size to 24x24 pixels
/>
);
}
export default CustomizedTimelinePoints;
In this configuration:
- The
timelinePointShape
prop is set to"diamond"
, changing the points from the default circles. - The
timelinePointDimension
prop is set to24
, making the diamond points 24px wide and 24px high.
By customizing the shape, dimension, or even using entirely custom icons, you can significantly alter the visual style of the timeline track to better suit your application's design.