0.1.0 • Published 1 year ago

frova-react-kit v0.1.0

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

frova-react-kit

cov tests npm license

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