rounded-cycle-timeline-react v1.0.9

rounded-cycle-timeline-react

rounded-cycle-timeline-react is a React and Next.js component designed to display a cycle timeline with rotating avatars or any other view you need.

Example on CodeSandbox

You can find a live example of how to use this component on CodeSandbox:

CodeSandbox Example

Author

Ahmed Nasser

Installation

To install the package, use the following npm command:

npm install rounded-cycle-timeline-react

Usage

In a React Application

import React from 'react';
import CyrcleTimeLine from 'rounded-cycle-timeline-react';

const App = () => {
  return (
    <div>
      <h1>CyrcleTimeLine Example</h1>
      <CyrcleTimeLine 
        innerCyrcleClasss="custom-inner-class" 
        avatarContainerClasss="custom-avatar-container" 
        arrayData={[1, 2, 3, 4, 5]} 
        rotate={true} 
        duration={5000}
        relativeContainerClasss="custom-relative-class"
      />
    </div>
  );
};

export default App;

In a Next.js Application

import React from 'react';
import dynamic from 'next/dynamic';

const CyrcleTimeLine = dynamic(() => import('rounded-cycle-timeline-react'), { ssr: false });

const Home = () => {
  return (
    <div>
      <h1>CyrcleTimeLine Example</h1>
      <CyrcleTimeLine 
        innerCyrcleClasss="custom-inner-class" 
        avatarContainerClasss="custom-avatar-container" 
        arrayData={[1, 2, 3, 4, 5]} 
        rotate={true} 
        duration={5000}
        relativeContainerClasss="custom-relative-class"
      />
    </div>
  );
};

export default Home;

Props

License

This project is licensed under the MIT License.