Back to Polythene Shadow main page

Shadow component for React

• Options
• Usage
• Appearance
  • Themed component
  • Styling
    • CSS

Options

Shadow options

Usage

Shadow has 5 depth levels, configured with option shadowDepth.

import React from "react"
import { Shadow } from "polythene-react"

<Shadow shadowDepth={2} />

To add a shadow to an element, the element must have the style position: "relative". In this example the shadow is added to the outer div:

<div className="outer" style={{ position: "relative" }}>
  <span>Some card</span>
  <Shadow shadowDepth={2} />
</div>

To animated the shadow on change, use animated. Using a dynamic shadowDepth value in the component state:

import React, { Component } from "react";

class InteractiveShadow extends Component {

  constructor(props) {
    super(props);
    this.state = {
      shadowDepth: 1
    };
  }

  render() {
    // change the shadowDepth value, for instance after user interaction (left out here)
    return (<div>
      <Shadow shadowDepth={this.state.shadowDepth} />
    </div>)
  }
}

Appearance

Below are examples how to change the shadow appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { ShadowCSS } from "polythene-css"

ShadowCSS.addStyle(".themed-icon", {
  shadow_bottom_depth_1: "10px 10px 10px 0px rgba(45,58,112,.5)"
})

<Shadow className="themed-shadow" />

Depth can be set using a theme (replacing the component option):

ShadowCSS.addStyle(".themed-shadow", {
  shadow_depth: 3
})

Styling

CSS

Change CSS using the Shadow CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/shadow"