Package Exports

z-indexify
z-indexify/esm/index.js
z-indexify/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (z-indexify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Z-Indexify

A sane way to manage CSS z-indexes across application

Works with Styled Components and TailwindCSS

Install
Usage
API

Install

# NPM
npm install --save z-indexify

# Yarn
yarn add z-indexify

Usage

With Styled Components

// In your theme.ts used on ThemeProvider
import { zIndexify } from 'z-indexify';

const zIndex = zIndexify(['header', 'overlay', 'sidebar']);
const theme = {
  // others...
  zIndex,
};

// And on Styled
const Header = styled.header`
  z-index: ${({ theme }) => theme.zIndex.header}; /** z-index: 100; */
`;

With TailwindCSS

// In your tailwind.config.ts
import type { Config } from 'tailwindcss';
import { zIndexify } from 'z-indexify';

const zIndex = zIndexify(['header', 'overlay', 'sidebar'], {
  minIndex: 500,
});

const config: Config = {
  content: [...],
  theme: {
    extend: {
      // ...your configs
      zIndex,
    }
  },
};

export default config;

API

zIndexify(labels[, options]])
- labels
  - Type: array
  - Name of your z-indexes in asc order.
  - To change order values, simple reorder the array values. e.g.:
```
['foo', 'bar', 'baz'] //=> foo: 100, bar: 101, baz: 102
['bar', 'baz', 'foo'] //=> bar: 100, baz: 101, foo: 103
```
- options
  - Type: object
  - Configuration options if you need

options

Param	Type	Description	Default	e.g.
`minIndex`	`number`	Index starts of	`100`	`{ minIndex: 300 }` starts with: `z-index: 300`
`inverse`	`boolean`	Invert array values order	`false`	`['foo', 'bar']` will produce: `{ foo: 101, bar: 100 }`
`step`	`number`	The gap between number	`1`	`{ step: 10 }` creates: `{ 100, 110, 120, 130, ... }`

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

z-indexify