Shadow

Style a component's shadow properties

import { shadow } from 'jynx'

The shadow function gives you control of a component's shadow styles, providing support for all shadow-related properties including box-shadow and text-shadow.

Usage

To use the shadow function, create a component using the ShadowProps type and include the function within it's style argument.

/* Import the function and its corresponding props type */
import { shadow, ShadowProps } from 'jynx'


/* Then define a component with the type and include the 
 function within its style argument */
export const Component = styled.div<ShadowProps>`
    ${shadow}
  `

/* Or using the legacy functional syntax */
export const Component = styled.div<ShadowProps>((props) => `
    ${shadow}
  `)

Props

By default, when passing a string to any shadow props, the raw css value is used. This means you can define shadow styles however you normally would:

<Component boxShadow='2px 4px 8px #343e40' />

Additionally, any standard named values (inherit, initial, etc) are available to use, and when using typescript, will show up as suggestions in your IDE.

Theming

You can also create a shadows scale within your theme, which is then accessible in all shadow props.

This can be defined as any valid scale type and the values will be shown as suggestions in your IDE.

/* simple array-based scale */
export const theme = {
  shadows: [
    '2px 4px 8px #343e40',
    '4px 8px 12px 4px #343e40',
    '8px 12px 16px 8px #343e40'
  ]
}

/* simple object-based scale */
export const theme = {
  shadows: {
    small: '0.125rem 0.25rem 0.5rem #343e40',
    medium: '0.25rem 0.5rem 0.75rem 0.25rem #343e40',
    large: '0.5rem 0.75rem 1rem 0.5rem #343e40'
  }
}

/* complex nested scale */
export const theme = {
  shadows: {
    light: ['3px 6px 9px #aaa', '6px 9px 12px 6px #aaa', '9px 12px 15px 9px #aaa'],
    dark: {
      small: '0.3rem 0.6rem 0.9rem #333',
      medium: '0.6rem 0.9rem 1.2rem 0.3rem #333',
      large: '0.6rem 1.2rem 1.5rem 0.3rem #333'
    }
  }
}

Types

When working in typescript, use the ShadowProps interface to provide reliable type definitions for your components and value suggestions in your IDE.

interface ShadowProps {
  boxShadow?: StyleProp<CSS.Property.BoxShadow | ThemeValue<'shadows'>>
  textShadow?: StyleProp<CSS.Property.TextShadow | ThemeValue<'shadows'>>
}

The shadow function allows for a number of props to be passed to your component from directly within your jsx / tsx. Select props also have shorthand aliases that can be used for a more concise syntax.

Prop	Shorthand	CSS Property	Theme Scale
boxShadow		box-shadow	shadows
textShadow		text-shadow	shadows

Examples