Code Monkey home page Code Monkey logo

react-roadmap-milestones's Introduction

React Roadmap Milestones

How use it

Add and use this component in your project. Example of use:

Description

The React Roadmap Milestones component is a board with a lot of features, functionalities or whatever where a user can see all of them divided by categories and milestones.

Several examples than can help us to understand it:

  • Cookbook: maybe you what add recipes of different categories and you what show it by milestones as timeline or book version.
  • Video game: where we can see the different features (deployed, in development or to be develop) in several milestones as a timeline.
  • Software project like this component. Yes, use this component to explain the evolution of himself.
  • Definitely The evolution of any project or idea to be showed by milestones.

Usage

  import type { RoadmapMilestones } from '@jaimejesusserrano/react-roadmap-milestones'
  import { ReactRoadmapMilestones } from '@jaimejesusserrano/react-roadmap-milestones'

  const roadmapMilestonesData: RoadmapMilestones = {
    milestones: [
      {
        name: '0.1',
        status: 'pending',
        goals: [
          {
            name: 'Goal 1',
            description: 'Goal description',
            shortDescription: 'Short goal description',
            status: 'pending',
            updateDate: new Date(),
          }
        ],
      }
    ],
    name: 'Example',
  }

  return (
    <div style={{height: 600, width: 1000}}>
      <ReactRoadmapMilestones roadmapMilestonesData={roadmapMilestonesData} />
    </div>
  )

Future ideas to be developed (suggestions are accepted)

  • Overwrite styles, to allow config your own CSS.

Available Scripts

In the project directory, you can run:

npm run build

Builds the component.

To update the package in NPM

npm publish

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.