diff --git a/README.md b/README.md index f2efd1d..4a04079 100644 --- a/README.md +++ b/README.md @@ -157,16 +157,3 @@ It provides auto generated dots for the carousel. | Prop | Type | Default | Required | | --------- | ------ | ------- | -------- | | className | string | | No | - -### TODO: - -- [x] Add beta implementation -- [x] Add stable version -- [x] Setup CI -- [x] DX improvments prettier/eslint -- [x] Add docs -- [x] Context initial props refactoring -- [x] Add unit tests -- [ ] Add examples -- [x] Publish on NPM -- [x] Add counter element diff --git a/package-lock.json b/package-lock.json index d06d1fb..a585aac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14514,6 +14514,10 @@ "webpack": ">=4.41.1 || 5.x" } }, + "node_modules/react-micro-carousel": { + "resolved": "packages/react-simple-headless-carousel", + "link": true + }, "node_modules/react-refresh": { "version": "0.14.2", "dev": true, @@ -14571,10 +14575,6 @@ "version": "16.13.1", "license": "MIT" }, - "node_modules/react-simple-headless-carousel": { - "resolved": "packages/react-simple-headless-carousel", - "link": true - }, "node_modules/read-cache": { "version": "1.0.0", "dev": true, @@ -18034,6 +18034,7 @@ } }, "packages/react-simple-headless-carousel": { + "name": "react-micro-carousel", "version": "0.0.19", "license": "MIT", "workspaces": [ diff --git a/packages/react-simple-headless-carousel/readme.md b/packages/react-simple-headless-carousel/readme.md new file mode 100644 index 0000000..4a04079 --- /dev/null +++ b/packages/react-simple-headless-carousel/readme.md @@ -0,0 +1,159 @@ +# React Micro Carousel + +![example workflow](https://github.com/pstachula-dev/react-micro-carousel/actions/workflows/main.yml/badge.svg) + +![bundlesize](https://badgen.net/bundlephobia/minzip/react-micro-carousel) + +## Component features + +- Extremely small package size (gzipped): + - Javascript: 2.6kB + - CSS: 1.5kB +- 0 external dependencies +- Full typescript support +- Built in with Tailwind, but you can always customize the styles +- Handling touch/mouse events +- Lazy image loading +- Responsive support + +## Documentation + +[Simple react carousel docs](https://simple-react-carousel.onrender.com/) + +## How to use: + +### If you are using Tailwind: + +`tailwind.config.ts` + +```js +export default { + content: [ + "./src/**/*.{js,ts,jsx,tsx}", + "./node_modules/react-micro-carousel/**/*.js", + ], +} satisfies Config; +``` + +### ...other way? + +```js +import 'react-micro-carousel/styles.min.css'; +``` + +### Components markup: + +```js +import { + Carousel, + CarouselProvider, + Counter, + DotsGroup, + NextButton, + PrevButton, + Slide, +} from 'react-micro-carousel'; + + + + + + + + + + + + + Next + Prev + +``` + +## Props documentation: + +### `` + +Component is used to initialize the carousel context with configuration options and wrap the other components. + +| Prop | Type | Default | Required | +| ------------- | --------- | ------- | -------- | +| children | ReactNode | | Yes | +| slideHeight | number | 0 | Yes | +| total | number | 0 | Yes | +| autoPlayDelay | number | false | No | +| slidesVisible | number | 1 | No | +| step | number | 1 | No | +| threshold | number | 0.25 | No | +| infinite | boolean | false | No | +| disableTouch | boolean | false | No | +| lazy | boolean | true | No | +| autoPlay | boolean | false | No | + +### `` + +A carousel that wraps the slides and provides the core functionality, such as scrolling to the next or previous slide. + +| Prop | Type | Default | Required | +| ----------------- | --------- | ------- | -------- | +| children | ReactNode | | Yes | +| wrapperClassName | string | | No | +| carouselClassName | string | | No | + +### `` + +A single slide in a carousel. + +| Prop | Type | Default | Required | +| --------- | --------- | ------- | -------- | +| children | ReactNode | | Yes | +| index | number | | Yes | +| className | string | | No | + +### `` + +A single dot. + +| Prop | Type | Default | Required | +| ------------- | -------- | ------- | -------- | +| className | string | | No | +| colorActive | string | | No | +| colorInactive | string | | No | +| index | number | | Yes | +| disabled | boolean | | No | +| onClick | Function | | No | + +### `` + +A component that renders a group of dots, representing the slides in the carousel. +It provides auto generated dots for the carousel. + +| Prop | Type | Default | Required | +| ------------- | -------- | ------- | -------- | +| className | string | | No | +| dotClassName | string | | No | +| colorActive | string | | No | +| colorInactive | string | | No | +| onClick | Function | | No | + +### `` + +| Prop | Type | Default | Required | +| --------- | --------- | ------- | -------- | +| className | string | | No | +| children | ReactNode | | Yes | +| onClick | Function | | No | + +### `` + +| Prop | Type | Default | Required | +| --------- | --------- | ------- | -------- | +| className | string | | No | +| children | ReactNode | | Yes | +| onClick | Function | | No | + +### `` + +| Prop | Type | Default | Required | +| --------- | ------ | ------- | -------- | +| className | string | | No |