https://github.com/zzarcon/react-cristal

Beautiful window manager for React
https://github.com/zzarcon/react-cristal

Last synced: 3 months ago
JSON representation

Beautiful window manager for React

• Host: GitHub
• URL: https://github.com/zzarcon/react-cristal
• Owner: zzarcon
• License: mit
• Created: 2017-12-01T11:09:39.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2019-02-19T00:25:51.000Z (almost 6 years ago)
• Last Synced: 2024-11-08T16:44:20.756Z (3 months ago)
• Language: TypeScript
• Homepage: https://zzarcon.github.io/react-cristal/
• Size: 7.38 MB
• Stars: 30
• Watchers: 5
• Forks: 7
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-github-repos - zzarcon/react-cristal - Beautiful window manager for React (TypeScript)

README

        
# react-cristal

> Convert any component into a window



  

  





# Demo 🍿

[https://zzarcon.github.io/react-cristal](https://zzarcon.github.io/react-cristal)

# Features ✨

* Draggable

* Resizable

* Automatically stacking

* Smart positions

* Window boundaries restriction

# Install 🚀

```

$ yarn add react-cristal

```

# Usage ⛏

**Basic** 

```tsx

import Cristal from 'react-cristal';

  Look at me, I'm inside a window!

```

**Custom**

```tsx

import Cristal from 'react-cristal';

 console.log('close clicked')}

>

  


    Some content

  


```

# Using initial position

```tsx

// Smart positions

// Custom coordinates

```

# Api 📚

```ts

export type InitialPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'center';

interface Props {

  children: ReactNode;

  title?: string;

  initialPosition?: InitialPosition;

  isResizable?: boolean;

  onClose?: () => void;

  className?: string;

}

```

See [example/](https://github.com/zzarcon/react-cristal/tree/master/example) for full example.

# Author

[@zzarcon](https://twitter.com/zzarcon)