# @taraputzel/react-affix

> Affix

Latest version **0.0.1** (published 2024-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @taraputzel/react-affix
pnpm add @taraputzel/react-affix
yarn add @taraputzel/react-affix
bun add @taraputzel/react-affix
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2024-03-09 |
| First published | 2024-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 72 |
| Unpacked size | 10.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | taraputzel |
| Keywords | affix, react-affix, design, uiw, uiw-react, react.js, react, react-component, component, components, ui, css, uikit, react-ui, framework, front-end, frontend |

## Links

- npm: https://www.npmjs.com/package/@taraputzel/react-affix
- Repository: https://github.com/taraputzel/react-affix
- Homepage: https://github.com/taraputzel/react-affix#readme
- Issues: https://github.com/taraputzel/react-affix/issues
- npm.io page: https://npm.io/package/@taraputzel/react-affix

## Dependencies (72)

- [uiw](https://npm.io/package/uiw.md) ^4.22.3
- [cors](https://npm.io/package/cors.md) ^2.8.0
- [jest](https://npm.io/package/jest.md) ^29.5.0
- [jsdom](https://npm.io/package/jsdom.md) ^22.1.0
- [karma](https://npm.io/package/karma.md) ^6.3.18
- [react](https://npm.io/package/react.md) >=16.9.0
- [enzyme](https://npm.io/package/enzyme.md) ^3.11.0
- [escope](https://npm.io/package/escope.md) ^4.0.0
- [core-js](https://npm.io/package/core-js.md) ^3.35.1
- [express](https://npm.io/package/express.md) ^4.12.4
- [ts-jest](https://npm.io/package/ts-jest.md) ^29.0.5
- [webpack](https://npm.io/package/webpack.md) ^5.88.2
- [prettier](https://npm.io/package/prettier.md) 3.2.4
- [react-dom](https://npm.io/package/react-dom.md) >=16.9.0
- [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.23.4
- [@formio/js](https://npm.io/package/@formio/js.md) ^5.0.0-rc.33
- [@uiw/utils](https://npm.io/package/@uiw/utils.md) ^4.22.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [typescript](https://npm.io/package/typescript.md) ^5.0.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.23.7
- [karma-mocha](https://npm.io/package/karma-mocha.md) ^2.0.1
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.14
- [babel-loader](https://npm.io/package/babel-loader.md) ^9.1.3
- [eventemitter2](https://npm.io/package/eventemitter2.md) ^6.4.5
- [karma-webpack](https://npm.io/package/karma-webpack.md) ^5.0.0
- [@uiw/formatter](https://npm.io/package/@uiw/formatter.md) ~2.0.0
- [@uiw/reset.css](https://npm.io/package/@uiw/reset.css.md) ~1.0.5
- [babel-polyfill](https://npm.io/package/babel-polyfill.md) ^6.26.0
- [presale-demo-pe](https://npm.io/package/presale-demo-pe.md) ^0.1.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.16.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.23.8
- [@gaddysetsuko/vote](https://npm.io/package/@gaddysetsuko/vote.md) ^1.0.0
- [identity-obj-proxy](https://npm.io/package/identity-obj-proxy.md) ^3.0.0
- [rollup-plugin-sass](https://npm.io/package/rollup-plugin-sass.md) ^1.12.19
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.23.3
- [eslint-plugin-mocha](https://npm.io/package/eslint-plugin-mocha.md) ^10.2.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.33.2
- [react-test-renderer](https://npm.io/package/react-test-renderer.md) ^18.2.0
- [@ibomorrissey/shoppy](https://npm.io/package/@ibomorrissey/shoppy.md) ^0.1.0
- [@rinaudokasia/manage](https://npm.io/package/@rinaudokasia/manage.md) ^0.0.3
- [karma-mocha-reporter](https://npm.io/package/karma-mocha-reporter.md) ^2.2.5
- [rollup-plugin-terser](https://npm.io/package/rollup-plugin-terser.md) ^7.0.2
- [@kdominic909/polyfill](https://npm.io/package/@kdominic909/polyfill.md) ^0.2.0
- [@pincince64883736/tea](https://npm.io/package/@pincince64883736/tea.md) ^0.3.0
- [@rinaudokasia/checker](https://npm.io/package/@rinaudokasia/checker.md) ^1.0.0
- [karma-chrome-launcher](https://npm.io/package/karma-chrome-launcher.md) ^3.1.1
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^12.1.5
- [@uiw/react-back-to-top](https://npm.io/package/@uiw/react-back-to-top.md) ^1.2.0
- [eslint-config-prettier](https://npm.io/package/eslint-config-prettier.md) ^9.1.0
- [jest-environment-jsdom](https://npm.io/package/jest-environment-jsdom.md) ^29.5.0
- [@gaddysetsuko/timestamp](https://npm.io/package/@gaddysetsuko/timestamp.md) ^0.0.1
- [@ibomorrissey/dashboard](https://npm.io/package/@ibomorrissey/dashboard.md) ^0.1.0
- [@kdominic909/file-react](https://npm.io/package/@kdominic909/file-react.md) ^1.2.3
- [@rendaxia/sdk_swap_core](https://npm.io/package/@rendaxia/sdk_swap_core.md) ^0.0.3
- [@rollup/plugin-commonjs](https://npm.io/package/@rollup/plugin-commonjs.md) ^24.0.1
- [enzyme-adapter-react-16](https://npm.io/package/enzyme-adapter-react-16.md) ^1.15.6
- [@taraputzel/reactwebsite](https://npm.io/package/@taraputzel/reactwebsite.md) ^1.0.0
- [@rollup/plugin-typescript](https://npm.io/package/@rollup/plugin-typescript.md) ^11.0.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5
- [react-code-preview-layout](https://npm.io/package/react-code-preview-layout.md) ^3.1.4
- [rollup-plugin-typescript2](https://npm.io/package/rollup-plugin-typescript2.md) ^0.34.1
- [@richeroneren/fast-presale](https://npm.io/package/@richeroneren/fast-presale.md) ^1.3.0
- [@pincince64883736/cryptobot](https://npm.io/package/@pincince64883736/cryptobot.md) ^0.0.2
- [@pincince64883736/daily-pro](https://npm.io/package/@pincince64883736/daily-pro.md) ^0.3.0
- [@rollup/plugin-node-resolve](https://npm.io/package/@rollup/plugin-node-resolve.md) ^15.0.1
- [@uiw/react-markdown-preview](https://npm.io/package/@uiw/react-markdown-preview.md) ^5.0.3
- [react-transform-catch-errors](https://npm.io/package/react-transform-catch-errors.md) ^1.0.0
- [@numberonecamomilew/next-ui-demo](https://npm.io/package/@numberonecamomilew/next-ui-demo.md) ^0.2.0
- [rollup-plugin-peer-deps-external](https://npm.io/package/rollup-plugin-peer-deps-external.md) ^2.2.4
- [@richeroneren/react-slider-private](https://npm.io/package/@richeroneren/react-slider-private.md) ^1.2.0
- [markdown-react-code-preview-loader](https://npm.io/package/markdown-react-code-preview-loader.md) ^2.1.2
- [@numberonecamomilew/landing-page-start-crypto](https://npm.io/package/@numberonecamomilew/landing-page-start-crypto.md) ^0.2.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2024-03-09

## README

Affix 图钉
===

[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![Open in unpkg](https://img.shields.io/badge/Open%20in-unpkg-blue)](https://uiwjs.github.io/npm-unpkg/#/pkg/@uiw/react-affix/file/README.md)
[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-affix.svg?style=flat)](https://www.npmjs.com/package/@uiw/react-affix)
[![npm version](https://img.shields.io/npm/v/@uiw/react-affix.svg?label=@uiw/react-affix)](https://npmjs.com/@uiw/react-affix)

使用图钉，可以将内容固定在屏幕可视范围，并且不随页面的滚动而滚动，常用于菜单等。

```jsx
import { Affix } from 'uiw';
// or
import Affix from '@uiw/react-affix';
```

### 基本用法
 
```jsx mdx:preview
import React from 'react';
import { Affix, Button } from 'uiw';

export default function Demo() {
  return (
    <Affix offsetTop={60}>
      <Button type="primary">1 当按钮距离顶部距离为 0，按钮被钉在顶部</Button>
    </Affix>
  )
}
```

### 钉在底部

这个实例需要你缩小窗口高度，就可以测试看效果啦。

```jsx mdx:preview
import React from 'react';
import { Affix, Button } from 'uiw';

export default function Demo() {
  return (
    <Affix offsetBottom={10} onChange={(affixed) => {
      console.log('affixed::', affixed);
    }}>
      <Button type="primary" style={{ marginLeft: 20 }}>2 当按钮距离底部距离为 0，按钮被钉在底部</Button>
    </Affix>
  )
}
```

### Props

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| offsetBottom | 	距离窗口底部达到指定偏移量后触发 | Number| - |
| offsetTop | 	距离窗口顶部达到指定偏移量后触发 | Number| - |
| onChange | 		固定状态改变时触发的回调函数 | Function(affixed) | - |

---
_Source: https://npm.io/package/@taraputzel/react-affix · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._