Transition

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 250px;
    width: 250px;
    background: #bada55;
  `;

  return (
    <>
      <Transition isOpen={isOpen} collapse>
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'hide' : 'show'}
      </Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 250px;
    width: 250px;
    background: #bada55;
  `;

  return (
    <>
      <Transition isOpen={isOpen} fade>
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'hide' : 'show'}
      </Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 250px;
    width: 250px;
    background: #bada55;
  `;

  return (
    <>
      <Transition isOpen={isOpen} nudgeLeft style={{ margin: '0 0 10px 50px' }}>
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'hide' : 'show'}
      </Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 250px;
    width: 50px;
    margin: 0 auto;
    background: #bada55;
  `;

  return (
    <>
      <Transition
        isOpen={isOpen}
        style={{ width: '250px', height: '250px' }}
        rotate45
      >
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>rotate</Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 250px;
    width: 250px;
    background: #bada55;
    margin: 0 auto;
  `;

  return (
    <>
      <Transition isOpen={isOpen} style={{ width: '250px' }} scale>
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'shrink' : 'grow'}
      </Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 100%;
    width: 250px;
    background: #bada55;
  `;

  return (
    <>
      <Transition isOpen={isOpen} slideLeft>
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'hide' : 'show'}
      </Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 250px;
    width: 250px;
    background: #bada55;
  `;

  return (
    <>
      <Transition isOpen={isOpen} nudgeBottom fade>
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'hide' : 'show'}
      </Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 250px;
    width: 250px;
    background: #bada55;
  `;

  return (
    <>
      <Transition isOpen={isOpen} collapse unmountOnExit>
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'hide' : 'show'}
      </Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);

  const Box = styled('div')`
    height: 250px;
    width: 250px;
    background: #bada55;
  `;

  const customTransition = {
    exit: {
      rotate: 360,
      transition: {
        rotate: {
          type: 'inertia',
          velocity: 500,
        },
      },
    },
    enter: {
      rotate: 0,
      transition: {
        rotate: {
          type: 'spring',
          damping: 10,
          stiffness: 100,
        },
      },
    },
  };

  const baseStyle = {
    width: '250px',
    height: '250px',
  };

  return (
    <>
      <Transition
        style={baseStyle}
        isOpen={isOpen}
        customTransition={customTransition}
      >
        <Box />
      </Transition>
      <Button onClick={() => setIsOpen(!isOpen)}>Spin it!</Button>
    </>
  );
}

import React from 'react';

import styled from '@emotion/styled';
import { Button, Transition, Checkbox } from 'react-magma-dom';

export function Example() {
  const [isOpen, setIsOpen] = React.useState(false);
  const [properties, setProperties] = React.useState({});

  const Box = styled('div')`
    height: 250px;
    width: 250px;
    background: #bada55;
  `;

  const Preview = () => (
    <pre>
      {'<'}Transition{' '}
      {Object.keys(properties)
        .filter(key => properties[key])
        .join(' ')}
      {'>\n'}
      {'  <'}div{'>'}children{'<'}/div{'>\n'}
      {'<'}/Transition{'>'}
    </pre>
  );

  return (
    <>
      <Checkbox
        labelText="unmountOnExit"
        checked={properties.unmountOnExit}
        onChange={() =>
          setProperties({
            ...properties,
            unmountOnExit: !properties.unmountOnExit,
          })
        }
      />
      <Checkbox
        labelText="fade"
        checked={properties.fade}
        onChange={() =>
          setProperties({ ...properties, fade: !properties.fade })
        }
      />
      <Checkbox
        labelText="scale"
        checked={properties.scale}
        onChange={() =>
          setProperties({ ...properties, scale: !properties.scale })
        }
      />
      <Checkbox
        labelText="collapse"
        checked={properties.collapse}
        disabled={
          properties.slideTop |
          properties.slideBottom |
          properties.slideLeft |
          properties.slideRight |
          properties.nudgeTop |
          properties.nudgeBottom |
          properties.nudgeLeft |
          properties.nudgeRight
        }
        onChange={() =>
          setProperties({ ...properties, collapse: !properties.collapse })
        }
      />
      <Checkbox
        labelText="slideTop"
        checked={properties.slideTop}
        disabled={
          properties.collapse |
          properties.slideBottom |
          properties.slideLeft |
          properties.slideRight |
          properties.nudgeTop |
          properties.nudgeBottom |
          properties.nudgeLeft |
          properties.nudgeRight
        }
        onChange={() =>
          setProperties({ ...properties, slideTop: !properties.slideTop })
        }
      />
      <Checkbox
        labelText="slideBottom"
        checked={properties.slideBottom}
        disabled={
          properties.collapse |
          properties.slideTop |
          properties.slideLeft |
          properties.slideRight |
          properties.nudgeTop |
          properties.nudgeBottom |
          properties.nudgeLeft |
          properties.nudgeRight
        }
        onChange={() =>
          setProperties({
            ...properties,
            slideBottom: !properties.slideBottom,
          })
        }
      />
      <Checkbox
        labelText="slideRight"
        checked={properties.slideRight}
        disabled={
          properties.collapse |
          properties.slideTop |
          properties.slideBottom |
          properties.slideLeft |
          properties.nudgeTop |
          properties.nudgeBottom |
          properties.nudgeLeft |
          properties.nudgeRight
        }
        onChange={() =>
          setProperties({
            ...properties,
            slideRight: !properties.slideRight,
          })
        }
      />
      <Checkbox
        labelText="slideLeft"
        checked={properties.slideLeft}
        disabled={
          properties.collapse |
          properties.slideTop |
          properties.slideBottom |
          properties.slideRight |
          properties.nudgeTop |
          properties.nudgeBottom |
          properties.nudgeLeft |
          properties.nudgeRight
        }
        onChange={() =>
          setProperties({ ...properties, slideLeft: !properties.slideLeft })
        }
      />
      <Checkbox
        labelText="nudgeTop"
        checked={properties.nudgeTop}
        disabled={
          properties.collapse |
          properties.slideTop |
          properties.slideBottom |
          properties.slideLeft |
          properties.slideRight |
          properties.nudgeBottom
        }
        onChange={() =>
          setProperties({ ...properties, nudgeTop: !properties.nudgeTop })
        }
      />
      <Checkbox
        labelText="nudgeBottom"
        checked={properties.nudgeBottom}
        disabled={
          properties.collapse |
          properties.slideTop |
          properties.slideBottom |
          properties.slideLeft |
          properties.slideRight |
          properties.nudgeTop
        }
        onChange={() =>
          setProperties({
            ...properties,
            nudgeBottom: !properties.nudgeBottom,
          })
        }
      />
      <Checkbox
        labelText="nudgeRight"
        checked={properties.nudgeRight}
        disabled={
          properties.collapse |
          properties.slideTop |
          properties.slideBottom |
          properties.slideLeft |
          properties.slideRight |
          properties.nudgeLeft
        }
        onChange={() =>
          setProperties({
            ...properties,
            nudgeRight: !properties.nudgeRight,
          })
        }
      />
      <Checkbox
        labelText="nudgeLeft"
        checked={properties.nudgeLeft}
        disabled={
          properties.collapse |
          properties.slideTop |
          properties.slideBottom |
          properties.slideLeft |
          properties.slideRight |
          properties.nudgeRight
        }
        onChange={() =>
          setProperties({ ...properties, nudgeLeft: !properties.nudgeLeft })
        }
      />

      <Preview />

      <Transition isOpen={isOpen} {...properties}>
        <Box />
      </Transition>

      <Button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'hide' : 'show'}
      </Button>
    </>
  );
}