What's New component for react

Show new features

Demo

| Announcements | Announcement Details | | ---------------------------------------------------------------------------- | :-----------------------------------------------------------------------------: | | | |

https://react-whats-new.netlify.app

Install

npm install --save @schemesonic/whats-new

Usage

import React, { useRef } from 'react';
import { Badge, Button } from '@material-ui/core';
import { WhatsNew, WhatsNewService } from '@schemesonic/whats-new';

const WhatsNewExample = (): JSX.Element => {
  const WhatsNewRef = useRef<any>();
  const [unreadCount, setUnreadCount] = React.useState(
    WhatsNewService.getUnreadCount(announcements)
  );
  const announcements = [
    {
      title: "NEW ABILITY WORD: COVEN",
      date: new Date("2022-04-09"),
      version: 'v1.1.0',
      tags: [{
        text: 'New Feature',
        color: 'rgba(0, 0, 0, 0.87)',
        backgroundColor: '#99d066',
      }],
      overview: `### This is overview`,
      content: `### This is content`
    }
  ];

  return <div>
    <Badge badgeContent={unreadCount} color="secondary" overlap="rectangular">
      <Button
        color="primary"
        variant="outlined"
        onClick={() => {
          WhatsNewRef.current?.togglePanel();
          setUnreadCount(WhatsNewService.getUnreadCount(announcements));
        }}
      >
        Show Announcements
      </Button>
    </Badge>
    <WhatsNew
      announcements={announcements}
      translation={{
        'sidepanel.title': "What's new in Magic: The Gathering?",
      }}
      ref={WhatsNewRef}
    />
  </div>;
};

export default WhatsNewExample;

Details

| Props | Definition | Type | Default | Required | | -------- | :-----------------------: | ---------------------------: | ------: | -------: | | prop | Example prop | Prop | null | true | | onChange | Example callback function | (updatedOpt: Prop) => void | null | true |

Licence

MIT License © SchemeSonic