Back to Guides

Composition

Guidance around composing multiple Preshape components and the underlying behaviour of the Base component.

Composing Components

Each component has it own use, but sometimes combining the behaviour is useful and necessary. A common case for this is adding flexing abilities to non-layout components.
import React, { Component } from 'react';
import { Appear, Flex } from 'preshape';


class MyComponent extends Component {
  render() {
    return (
      <Flex direction="horizontal">
        <Appear Component={ Flex }
            animation="Pop"
            grow
            initial="none">
          ...
        </Appear>

        <Appear Component={ Flex }
            animation="Pop"
            grow
            initial="none">
          ...
        </Appear>
      </Flex>
    );
  }
}

This example, would combine the behaviour of both Appear and Flex, allowing each of the components props to be set on a single element. This works by each component picking off the props that it cares about before spreading what's left onto the next component.
By default, every component ends with the Base component to provide the general utility stylign on anything. Beware that some components may be internally composing and intercepting certain props.