open-index/open-npm huggingface dataset:
npm package: @react-md/tooltip
Description: Create accessible tooltips within react-md based on the material design specifications.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/tooltip

Create accessible tooltips to add additional descriptions to buttons, links, or
any other element. The tooltips will automatically attempt to position
themselves within the viewport and adjust as needed.

## Installation

```sh
npm install --save @react-md/tooltip
```

It is also recommended to install the following packages as they work
hand-in-hand with this package:

```sh
npm install --save @react-md/theme \
  @react-md/button
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/tooltip/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Tooltip, useTooltip } from "@react-md/tooltip";

function App() {
  const { elementProps, tooltipProps } = useTooltip({
    baseId: "button-id",
    onClick(event) {
      // an optional click handler for the button
    },
  });

  return (
    <>
      <Button {...elementProps}>Button Text</Button>
      <Tooltip {...tooltipProps}>I am a tooltip</Tooltip>
    </>
  );
}

render(<App />, document.getElementById("root"));
```
npm package: @react-md/transition
Description: A package for working with react-md to use some simple transitions.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/transition

Create simple CSS transitions using the provided transition hooks and components
utilizing the default transition timing functions. This package also provides a
collapse transition, scaling transition, vertical only scaling transition, and a
new page transition named cross fade.

Provided components and hooks:

- `Collapse` or `useCollapseTransition` - transition an element in and out of
  view based on the height of the element
- `CrossFade` or `useCrossFadeTransition` - a transition generally used for a
  full page transition that fades and slightly moves a child component into view
- `ScaleTransition` or `useScaleTransition` - transition an element in and out
  of view with a `scale` transform that can be updated to just be `scaleY`
- `useTransition` - a hook implementation of the `Transition` component from
  `react-transition-group`
- `CSSTransition` or `useCSSTransition` - allows for a CSS transition that was
  heavily inspired by `react-transition-group`
- `useFixedPositioning` - hooks into the `CSSTransition` component from to fix
  an element to another element within the viewport

The `rmd-transition-shadow-transition` mixin allows you to "performantly"
transition between two box shadow values using the
[opacity trick](http://tobiasahlin.com/blog/how-to-animate-box-shadow/). This
mixin automatically creates a pseudo `::before` or `::after` element with the
final box shadow and animates the opacity once one of the `$active-selectors`
are triggered. The code below will help explain this part a bit more.

## Installation

```sh
npm install --save @react-md/transition
```

It is also recommended to install the following packages as they work
hand-in-hand with this package:

```sh
npm install --save @react-md/theme \
  @react-md/utils
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/transition/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import type { useState } from "react";
import { render } from "react-dom";
import { Button } from "@react-md/button";
import { Collapse } from "@react-md/transition";

const App = () => {
  const [collapsed, setCollapsed] = useState(true);

  return (
    <>
      <Button onClick={() => setCollapsed(!collapsed)}>Toggle</Button>
      <Collapse collapsed={collapsed}>
        <div>This is my collapsible content!</div>
      </Collapse>
    </>
  );
};

render(<App />, document.getElementById("root"));
```
npm package: @react-md/tree
Description: A package for creating an accessible tree component following the tree role.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/tree

Create accessible tree widgets following the
[tree view specifications](https://www.w3.org/TR/wai-aria-practices/#TreeView)
using the material design styles and fairly customizable renderers and styles
and reasonable defaults.

## Installation

```sh
npm install --save @react-md/tree
```

It is also recommended to install these other packages as they work hand-in-hand
with this package:

```sh
npm install --save @react-md/theme \
  @react-md/typography \
  @react-md/icon \
  @react-md/material-icons \
  @react-md/list
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/tree/demos) for live examples
and more customization information, but an example usage is shown below.

<!-- DOCS_REMOVE_END -->

## Usage

The main export from this package is the `Tree` component which allows you to
render a tree from `TreeData` which is really a lookup of
`Record<TreeItemId, TreeItem>`. The `Tree` component is fully controlled and
requires you to provide the selection and logic expansion with a few props. You
can use the `useTreeItemExpansion` and `useTreeItemSelection` hooks to get
pretty reasonable support out of the box including multi-select behavior.

If you are a Typescript user, this package also exports a decent amount of types
to help out such as the `TreeData`, `BaseTreeItem`, and `TreeItemSorter`.

Here's a quick example:

```tsx
import type { ReactElement, ReactNode } from "react";
import { render } from "react-dom";
import {
  Tree,
  TreeData,
  BaseTreeItem,
  useTreeItemExpansion,
  useTreeItemSelection,
} from "@react-md/tree";

interface MyTreeItem extends BaseTreeItem {
  name: string;
}

const data: TreeData<MyTreeItem> = {
  "item-1-id": {
    name: "Root Node",
    itemId: " item-1-id",
    parentId: null,
  },
  "item-2-id": {
    name: "Child 1",
    itemId: "item-2-id",
    parentId: "item-1-id",
  },
  "item-3-id": {
    name: "Child 2",
    itemId: "item-3-id",
    parentId: "item-1-id",
  },
};

export default function Example(): ReactElement {
  const selection = useTreeItemSelection([], false);
  const expansion = useTreeItemExpansion([]);

  return (
    <Tree
      id="example-tree"
      aria-label="Tree"
      data={data}
      {...selection}
      {...expansion}
    />
  );
}
```
npm package: @react-md/typography
Description: The base package for including typography for react-md.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/typography

This package is used to include typography into your application. There are 13
different font styles included with reasonable defaults, but they can also
easily be updated with custom values.

This package is mostly for generating the base typography onto different classes
throughout your app, but it also exposes `Typography` and `TextContainer`
components to help add typography throughout your app. There is also an
accessibility helper component named `SrOnly` that allows you to display text to
screen readers only.

If you'd like to change the typography values, check out the
[SassDoc page](https://react-md.dev/packages/typography/sassdoc) on the
documentation site.

## Installation

```sh
npm install --save @react-md/typography
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/typography/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

```tsx
import { render } from "react-dom";
import { Typography, TextContainer } from "@react-md/typography";

const App = () => (
  <TextContainer>
    <Typography type="headline-1">Headline 1</Typography>
    <Typography type="headline-2">Headline 2</Typography>
    <Typography type="headline-3">Headline 3</Typography>
    <Typography type="headline-4">Headline 4</Typography>
    <Typography type="headline-5">Headline 5</Typography>
    <Typography type="headline-6">Headline 6</Typography>
    <Typography type="subtitle-1">Subtitle 1</Typography>
    <Typography type="subtitle-2">Subtitle 2</Typography>
    <Typography type="body-1">Body 1</Typography>
    <Typography type="body-2">Body 2</Typography>
    <Typography type="overline">Overline</Typography>
    <Typography type="caption" component="p">
      Caption
    </Typography>
  </TextContainer>
);

render(<App />, document.getElementById("root"));
```
npm package: @react-md/utils
Description: General utils for react-md.
Author: Mikkel Laursen
Latest version: 5.1.6

# @react-md/utils

This package is for providing reusable accessibility hooks, components, and
utilities, a base css reset and other utility mixins, as well as general layout
and app size components and hooks. This package will be used by every other
scoped package within `react-md`, and has an extremely useful mixin for only
generating styles for packages that have been installed.

Check out the usage section below for more details.

## Installation

```sh
npm install --save @react-md/utils
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/utils/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

The main export for this package will mainly be the exposed mixins which can be
included with the following import:

```scss
@import "@react-md/utils/dist/mixins";

@include rmd-utils-base;

.custom-class {
  @include rmd-utils-rtl {
    margin-left: auto;
    margin-right: 1rem;
  }

  margin-left: 1rem;
}

.button {
  @include rmd-utils-hide-focus-outline;
}
```

### Usage with other packages

One of the great things about this package is that there is a mixin that will
automatically include all the react-md styles for packages you have included in
this file.

```scss
@import "@react-md/app-bar/dist/mixins";
@import "@react-md/avatar/dist/mixins";
@import "@react-md/button/dist/mixins";
@import "@react-md/elevation/dist/mixins";
@import "@react-md/utils/dist/mixins";

@include react-md-utils;
```

The example above will automatically include the styles for the `app-bar`,
`avatar`, and `button` packages as well as the base styles utils styles.
npm package: @react-medellin/components
Description: React Medellin Component Library
Author: Alejandro Nanez
Latest version: 1.5.0

# React Medellín Components Library
![Build Status](https://circleci.com/gh/react-medellin/components.svg?style=shield&circle-token=:circle-token)

# What is @react-medellin/components
A set of reusable React components that everyone can use. This project was created mainly to teach how to create a reusable component library to atendees to React Medellín Meetup ([Feel curious? Join us!](https://meetup.com/React-Medellin))

# Installation
Firs of all, this library has two peer dependencies: React and [Styled Components](https://github.com/styled-components/styled-components) so you must have those two first installed for this library to work properly.

In case you're still reading (yes!) you can install this library by typing `npm install --save @react-medellin/components` or if you're using yarn you can do `yarn add @react-medellin/components`

# Usage
Right now we have 2 components in the library, a `<Button />` and a `<Banner />` component, you can import them by doing this in any of your files:
```js
import { Button, Banner } from '@react-medellin/components';
```

# Contribute
We're using [Storybook](https://github.com/storybooks/storybook) for local development so you can see how the components will look like without using the not so beginner friendly `npm link`. For start playing around with this components, you just need to run `npm run dev` or `yarn dev` and then open `http://localhost:9001`
All contributors are welcome!

# Questions?
Go and open an issue, we'll be happy to help!

# Can I use this components in my application?
Off course you can! Please do it!