Skip to content

Commit 1e83394

Browse files
riktarriktar
committed
ehn docs
1 parent 97ccf40 commit 1e83394

15 files changed

+254
-37
lines changed

‎docs/docs/intro.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@ sidebar_position: 1
44

55
# Getting Started
66

7-
Install the package.
7+
Install the package...
88

99
```bash
1010
npm i @webeetle/react-headless-hooks
1111
```
12+
13+
...and you ar done!

‎docs/docs/useCarousel.mdx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
sidebar_position: 3
3+
---
4+
5+
# useCarousel
6+
7+
**useCarousel** simulate a carousel
8+
9+
## Basic Example
10+
11+
<iframe
12+
src="https://codesandbox.io/embed/sparkling-leaf-irys9?fontsize=14&hidenavigation=1&theme=dark"
13+
style={{
14+
width: '100%',
15+
height: '500px',
16+
border: 0,
17+
borderRadius: '4px',
18+
overflow: 'hidden',
19+
}}
20+
title="basic-carousel"
21+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
22+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
23+
></iframe>
24+
25+
## API
26+
27+
<div style={{ width: '100%' }}>
28+
<table style={{ width: '100%' }}>
29+
<thead style={{ width: '100%' }}>
30+
<tr>
31+
<th>Name</th>
32+
<th>Description</th>
33+
<th>Default</th>
34+
</tr>
35+
</thead>
36+
<tbody style={{ width: '100%' }}>
37+
<tr>
38+
<td>maxSlide</td>
39+
<td>Number of slides</td>
40+
<td>3</td>
41+
</tr>
42+
<tr>
43+
<td>loop</td>
44+
<td>Infinite loop</td>
45+
<td>true</td>
46+
</tr>
47+
<tr>
48+
<td>activeSlide</td>
49+
<td>Start from a specific slide</td>
50+
<td>1</td>
51+
</tr>
52+
</tbody>
53+
</table>
54+
</div>

‎docs/docs/useDropdown.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
sidebar_position: 4
3+
---
4+
5+
# useDropdown
6+
7+
Build your own dropdown component using this hook.
8+
9+
## Basic Example
10+
11+
<iframe
12+
src="https://codesandbox.io/embed/simple-dropdown-iiq00?fontsize=14&hidenavigation=1&theme=dark"
13+
style={{
14+
width: '100%',
15+
height: '500px',
16+
border: 0,
17+
borderRadius: '4px',
18+
overflow: 'hidden',
19+
}}
20+
title="simple-dropdown"
21+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
22+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
23+
/>

‎docs/docs/usePagination.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
sidebar_position: 5
3+
---
4+
5+
# usePagination
6+
7+
**usePagination** abstract a pagination system.
8+
9+
## Basic Example
10+
11+
<iframe
12+
src="https://codesandbox.io/embed/dry-hooks-eb7zq?fontsize=14&hidenavigation=1&theme=dark"
13+
style={{
14+
width: '100%',
15+
height: '500px',
16+
border: 0,
17+
borderRadius: '4px',
18+
overflow: 'hidden',
19+
}}
20+
title="useAccordion - Basic"
21+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
22+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
23+
/>

‎docs/docs/useProgressBar.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
sidebar_position: 6
3+
---
4+
5+
# useProgressBar
6+
7+
**useProgressBar** abstract a progress bar ux
8+
9+
## Basic Example
10+
11+
<iframe
12+
src="https://codesandbox.io/embed/dry-hooks-eb7zq?fontsize=14&hidenavigation=1&theme=dark"
13+
style={{
14+
width: '100%',
15+
height: '500px',
16+
border: 0,
17+
borderRadius: '4px',
18+
overflow: 'hidden',
19+
}}
20+
title="useAccordion - Basic"
21+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
22+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
23+
/>

‎docs/docs/useStepper.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
sidebar_position: 7
3+
---
4+
5+
# useStepper
6+
7+
**useStepper** simulate a stepper motor.
8+
9+
## Basic Example
10+
11+
<iframe
12+
src="https://codesandbox.io/embed/dry-hooks-eb7zq?fontsize=14&hidenavigation=1&theme=dark"
13+
style={{
14+
width: '100%',
15+
height: '500px',
16+
border: 0,
17+
borderRadius: '4px',
18+
overflow: 'hidden',
19+
}}
20+
title="useAccordion - Basic"
21+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
22+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
23+
/>

‎docs/docs/useSwitch.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
sidebar_position: 8
3+
---
4+
5+
# useSwitch
6+
7+
**useSwitch** simulate a switch.
8+
9+
## Basic Example
10+
11+
<iframe
12+
src="https://codesandbox.io/embed/dry-hooks-eb7zq?fontsize=14&hidenavigation=1&theme=dark"
13+
style={{
14+
width: '100%',
15+
height: '500px',
16+
border: 0,
17+
borderRadius: '4px',
18+
overflow: 'hidden',
19+
}}
20+
title="useAccordion - Basic"
21+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
22+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
23+
/>

‎docs/docs/useTab.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
sidebar_position: 9
3+
---
4+
5+
# useTab
6+
7+
**useTab** simulate a tabbed interface.
8+
9+
## Basic Example
10+
11+
<iframe
12+
src="https://codesandbox.io/embed/dry-hooks-eb7zq?fontsize=14&hidenavigation=1&theme=dark"
13+
style={{
14+
width: '100%',
15+
height: '500px',
16+
border: 0,
17+
borderRadius: '4px',
18+
overflow: 'hidden',
19+
}}
20+
title="useAccordion - Basic"
21+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
22+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
23+
/>

‎docs/docs/useTooltip.mdx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
sidebar_position: 10
3+
---
4+
5+
# useTooltip
6+
7+
**useTooltip** simulate a tooltip on hover.
8+
9+
## Basic Example
10+
11+
<iframe
12+
src="https://codesandbox.io/embed/dry-hooks-eb7zq?fontsize=14&hidenavigation=1&theme=dark"
13+
style={{
14+
width: '100%',
15+
height: '500px',
16+
border: 0,
17+
borderRadius: '4px',
18+
overflow: 'hidden',
19+
}}
20+
title="useAccordion - Basic"
21+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
22+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
23+
/>

‎docs/docusaurus.config.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const config = {
1414
onBrokenLinks: 'throw',
1515
onBrokenMarkdownLinks: 'warn',
1616
trailingSlash: false,
17-
favicon: 'img/favicon.ico',
17+
favicon: '🪝',
1818
organizationName: 'webeetle', // Usually your GitHub org/user name.
1919
projectName: 'react-headless-hooks', // Usually your repo name.
2020

@@ -46,10 +46,10 @@ const config = {
4646
({
4747
navbar: {
4848
title: 'React Headless Hooks',
49-
logo: {
49+
/* logo: {
5050
alt: 'React Headless Hooks Logo',
5151
src: 'img/logo.svg',
52-
},
52+
}, */
5353
items: [
5454
{
5555
type: 'doc',
@@ -68,16 +68,16 @@ const config = {
6868
footer: {
6969
style: 'dark',
7070
links: [
71-
{
71+
/* {
7272
title: 'Docs',
7373
items: [
7474
{
75-
label: 'Tutorial',
75+
label: 'Gettin Started',
7676
to: '/docs/intro',
7777
},
7878
],
79-
},
80-
{
79+
}, */
80+
/* {
8181
title: 'Community',
8282
items: [
8383
{
@@ -93,8 +93,8 @@ const config = {
9393
href: 'https://twitter.com/docusaurus',
9494
},
9595
],
96-
},
97-
{
96+
}, */
97+
/* {
9898
title: 'More',
9999
items: [
100100
{
@@ -106,9 +106,9 @@ const config = {
106106
href: 'https://github.com/facebook/docusaurus',
107107
},
108108
],
109-
},
109+
}, */
110110
],
111-
copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
111+
copyright: `Powered by <a href="https://webeetle.com">weBeetle</a>.`,
112112
},
113113
prism: {
114114
theme: lightCodeTheme,

‎docs/src/components/HomepageFeatures.js

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,40 +7,32 @@ const FeatureList = [
77
title: 'Easy to Use',
88
Svg: require('../../static/img/undraw_docusaurus_mountain.svg').default,
99
description: (
10-
<>
11-
Docusaurus was designed from the ground up to be easily installed and
12-
used to get your website up and running quickly.
13-
</>
10+
<>There are no complicated steps to set up, just a few lines of code.</>
1411
),
1512
},
1613
{
1714
title: 'Focus on What Matters',
1815
Svg: require('../../static/img/undraw_docusaurus_tree.svg').default,
19-
description: (
20-
<>
21-
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
22-
ahead and move your docs into the <code>docs</code> directory.
23-
</>
24-
),
16+
description: <>Every hook abstract the complexity of your application.</>,
2517
},
2618
{
27-
title: 'Powered by React',
19+
title: 'UI Framework Agnostic',
2820
Svg: require('../../static/img/undraw_docusaurus_react.svg').default,
2921
description: (
3022
<>
31-
Extend or customize your website layout by reusing React. Docusaurus can
32-
be extended while reusing the same header and footer.
23+
You are 100% free to use any React UI framework you want: Bootstrap,
24+
MUI, Tailwind or pure HTML
3325
</>
3426
),
3527
},
3628
];
3729

38-
function Feature({Svg, title, description}) {
30+
function Feature({ Svg, title, description }) {
3931
return (
4032
<div className={clsx('col col--4')}>
41-
<div className="text--center">
33+
{/* <div className="text--center">
4234
<Svg className={styles.featureSvg} alt={title} />
43-
</div>
35+
</div> */}
4436
<div className="text--center padding-horiz--md">
4537
<h3>{title}</h3>
4638
<p>{description}</p>

‎docs/src/components/HomepageFeatures.module.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
.features {
22
display: flex;
33
align-items: center;
4-
padding: 2rem 0;
4+
padding: 10rem 0 2rem 0;
55
width: 100%;
66
}
77

8+
@media screen and (max-width: 966px) {
9+
.features {
10+
padding: 2rem 0 2rem 0;
11+
}
12+
}
13+
814
.featureSvg {
915
height: 200px;
1016
width: 200px;

‎docs/src/css/custom.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: #25c2a0;
9+
--ifm-color-primary: #10bf8d;
1010
--ifm-color-primary-dark: rgb(33, 175, 144);
1111
--ifm-color-primary-darker: rgb(31, 165, 136);
1212
--ifm-color-primary-darkest: rgb(26, 136, 112);

0 commit comments

Comments
 (0)