frova-react-kit

A catalog of react components and custom hooks for easy the development of the UI

[!WARNING] This is a work in progress and not ready for production use yet.

Installation

[!WARNING] this package requires react and react-dom to be installed in your project. If you don't have them, you can install them with npm install react react-dom.

npm install frova-react-kit

Usage

DocumentMarkdown

import { DocumentMarkdown } from 'frova-react-kit';

const externalLink = https://gist.githubusercontent.com/FrovaHappy/58c836c7b48c4b2094f3037005c24b04/raw/exemple.md

const App = () => (
  <DocumentMarkdown
    articles={[
      {
        title: 'Hello Title',
        sections: [
          {
            title: 'Hello Section 1',
            url: externalLink,
            space: 0,
          },
        ],
      },
    ]}
  />  
);

Types

type Article = {
  title: string
  sections: Section[]
}

type Section = {
  title: string
  hashtag: string
  url: string
  space: number
}

• section.space: add a margin-left for show the hierarchy of the section

Props

• articles - Array of Article

Roadmap

[!NOTE] If you have any ideas or suggestions, please open an issue or a PR. I will be happy to discuss it with you.

Features

• [ ] useButton hook
• [ ] useSelect hook
• [ ] useInput hook
• [ ] useColorPicker hook
• [ ] useSwitch hook
• [ ] documentMarkdown remember active section position with url parameters
• [ ] documentMarkdown add light and dark mode support

Ideas

• [ ] useCheckbox hook
• [ ] useFilePicker hook
• [ ] useTextarea hook
• [ ] useTabs hook
• [ ] documentMarkdown add a <tag /> rule for the markdown parse

License

MIT © frova_happy