zzarcon / react-cristal

Beautiful window manager for React

react-cristal

Convert any component into a window

Demo 🍿

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

Features ✨

• Draggable
• Resizable
• Automatically stacking
• Smart positions
• Window boundaries restriction

Install 🚀

$ yarn add react-cristal

Usage ⛏

Basic

import Cristal from 'react-cristal';

<Cristal>
  Look at me, I'm inside a window!
</Cristal>

Custom

import Cristal from 'react-cristal';

<Cristal
  title="Some title"
  initialPosition="top-center"
  isResizable={false}
  onClose={() => console.log('close clicked')}
>
  <div>
    Some content
  </div>
</Cristal>

Using initial position

// Smart positions
<Cristal initialPosition="center" />
<Cristal initialPosition="top-right" />
<Cristal initialPosition="bottom-center" />

// Custom coordinates
<Cristal initialPosition={{x: 500, y: 100}} />

Api 📚

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/ for full example.

Author

@zzarcon