# ak-layer > A React layer component responsible for the position of an element on a page Latest version **62.2.2** (published 2017-01-24) · Apache-2.0 license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install ak-layer pnpm add ak-layer yarn add ak-layer bun add ak-layer ``` ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 62.2.2 | | Published | 2017-01-24 | | First published | 2016-07-11 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Atlassian Pty Ltd | | Maintainers | atlassian-aui | | Keywords | atlaskit, ui | ## Links - npm: https://www.npmjs.com/package/ak-layer - Repository: https://bitbucket.org/atlassian/atlaskit - Homepage: https://bitbucket.org/atlassian/atlaskit#readme - npm.io page: https://npm.io/package/ak-layer ## Dependencies (3) - [popper.js](https://npm.io/package/popper.js.md) ^1.0.1 - [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.11.6 - [akutil-shared-styles](https://npm.io/package/akutil-shared-styles.md) ^37.3.2 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 62.2.2 (latest) — 2017-01-24 - 62.2.1 — 2017-01-17 - 62.2.0 — 2017-01-10 - 62.1.2 — 2017-01-05 - 62.1.1 — 2017-01-03 - 62.1.0 — 2016-12-07 - 62.0.4 — 2016-12-06 - 62.0.3 — 2016-12-06 - 62.0.2 — 2016-12-01 - 62.0.1 — 2016-11-30 - 62.0.0 — 2016-11-28 - 60.0.3 — 2016-11-09 - 60.0.2 — 2016-11-08 - 60.0.1 — 2016-11-08 - 60.0.0 — 2016-11-08 - … 32 more at https://npm.io/package/ak-layer/versions ## README [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://aui-cdn.atlassian.com/atlaskit/registry/) [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://Commitizen.github.io/cz-cli/) [![semantic-release](https://img.shields.io/badge/GitHub-semantic_release-ffab00.svg)](https://github.com/semantic-release/semantic-release) [![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](https://ecosystem.atlassian.net/browse/AK) [![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-layer,ak-layer@62.2.2) # Layer The layer is responsible for the positioning of an element on a page. For example, you wrap a tooltip with a layer to make its position relative to a target. You can specify up to 12 different positions. If you use a layer with a component that could be opened or closed, you have to make sure you re-render the layer the first time you open the component, otherwise it will end up with a wrong position. ![Example of Layer](https://bytebucket.org/atlassian/atlaskit/raw/22af8c2e73d35f09b6c60c37805d885cf6057d9b/packages/ak-layer/docs/layer.png) ## Try it out Interact with a [live demo of the ak-layer component](https://aui-cdn.atlassian.com/atlaskit/stories/ak-layer/62.2.2/). ## Installation ```sh npm install ak-layer ``` ## Using the component ### HTML This package exports the ak-layer React component. Import the component in your React app as follows: ```js import Layer from 'ak-layer'; const myContent = (
I'm going to be aligned to the right!
); ReactDOM.render(
Some content
, container); ``` Any content that is passed to Layer as children will always be rendered and any content passed throught the `content` prop will be rendered aligned to the internal content. ## Layer **Kind**: global class * Properties * [layer.position](#Layer+position) : String * [layer.boundariesElement](#Layer+boundariesElement) : String * [layer.autoPosition](#Layer+autoPosition) : Boolean * [layer.offset](#Layer+offset) : String * [layer.content](#Layer+content) : ReactElement * [layer.onFlippedChange](#Layer+onFlippedChange) : function ### new Layer() The layer is responsible for the positioning of an element on a page relative to another element. ### layer.position : String Position of a layer relative to its target. The position attribute takes two positional arguments in the format `position="edge edge-position"`, where `edge` specifies what edge to align the layer to, and `edge-position` specifies where on that edge the layer should appear. Refer to the table below for examples: | | top left | top center | top right | | |-------------|-------------|---------------|--------------|--------------| | left top | | | | right top | | left middle | | target | | right middle | | left bottom | | | | right bottom | | | bottom left | bottom center | bottom right | | **Kind**: instance property of [Layer](#Layer) **Default**: "right middle" **HTML Example** ```js ``` ### layer.boundariesElement : String Element to act as a boundary for the Layer. The Layer will not sit outside this element if it can help it. If, through it's normal positoning, it would end up outside the boundary the layer will flip positions if the autoPosition prop is set. Valid values are "window" and "viewport" If not set the boundary will be the current viewport. **Kind**: instance property of [Layer](#Layer) **Default**: "viewport" **HTML Example** ```js ``` ### layer.autoPosition : Boolean Sets whether a Layer will flip it's position if there is not enough space in the requested position. i.e. if a layer is set to position="top middle" but placing it there would cause it to be outside the viewport (or the boundariesElement if that is set) the Layer will instead be positioned in "bottom middle". **Kind**: instance property of [Layer](#Layer) **HTML Example** ```js ``` ### layer.offset : String A string representing the offsets from the target element in the format "[x-offset] [y-offset]", measured in pixels. **Kind**: instance property of [Layer](#Layer) **HTML Example** ```js ``` ### layer.content : ReactElement HTML content to display in the layer. Will be aligned to the target according to the `position` prop. **Kind**: instance property of [Layer](#Layer) **HTML Example** ```js const myContent = (
Some content
); ReactDOM.render(
I'm the target!
, container); ``` ### layer.onFlippedChange : function Callback that is used to know when the `flipped` state of Layer changes. This occurs when placing a Layered element in the requested position would cause Layer to be rendered outside of the boundariesElement (usually viewport). The callback will be passed an object with the following properties: | Key | Type | Description | | --------- | ------- | ---------------------------------------------------------------- | | flipped | boolean | whether the Layer has been moved away from its original position | | actualPosition | string | the current position of the Layer ("top left", etc) | | originalPosition | string | the position that Layer originally tried to position to | **Kind**: instance property of [Layer](#Layer) **HTML Example** ```js const handleFlipChange = ({ flipped, actualPosition, originalPosition }) => { ... }; ReactDOM.render(
I'm the target!
, container); ``` ## Support and feedback ### We're here to help! Let us know what you think of our components and docs, your feedback is really important for us. ### Community support Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,ak-layer,ak-layer@62.2.2). Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit). ### Create a support ticket Are you in trouble? [Let us know](https://ecosystem.atlassian.net/browse/AK)! --- _Source: https://npm.io/package/ak-layer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._