Skip to content

Commit

Permalink
Merge pull request #42 from Jersyfi/v2.x
Browse files Browse the repository at this point in the history 
V2.x
  • Loading branch information
@Jersyfi
Jersyfi authored Feb 13, 2023
2 parents f5c199c + df90d43 commit 21b9ae8
Show file tree
Hide file tree
Showing 34 changed files with 6,402 additions and 2,902 deletions.
3 changes: 2 additions & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended"
"plugin:@typescript-eslint/recommended",
"prettier"
],
"overrides": [
],
Expand Down
6 changes: 6 additions & 0 deletions .prettierrc.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"semi": false,
"trailingComma": "none",
"singleQuote": true,
"useTabs": true
}
15 changes: 15 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,21 @@

All notable changes to `react-cookify` will be documented in this file.

## v2.0.0-beta.1 - 2023-02-12

Skipped the work on the core function from v1 to v2 and included the build-in consent manager.

* Prepared for v2.0.0-beta.1 and seperated into different branches
* Added uuid, created_at, updated_at & revision to `consentObject`
* Modified the `CookifyConsent` components with UI changes to the detail layer
* Added paused option to pause consent mananger on a specific page
* Added floating button to open the consent manager
* Added Prettier for code formatting
* Added info and detail consent
* Added button to open the consent
* Added new settings for initialization
* Splitted into core `CookifyProvider` and consent `CookifyConsent` to choose between logic and own front-end or build-in front-end

## v1.0.0 - 2023-01-22

* Rolled back the consent modal and all necessary components for v2.0.0
Expand Down
201 changes: 3 additions & 198 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
# 🍪 react-cookify

![NPM Downloads](https://img.shields.io/npm/dt/react-cookify)
![GitHub package.json version](https://img.shields.io/github/package-json/v/jersyfi/react-cookify)
![npm](https://img.shields.io/npm/dm/react-cookify)
![NPM](https://img.shields.io/npm/v/react-cookify)
![Github Code Size](https://img.shields.io/github/languages/code-size/jersyfi/react-cookify)
![npm bundle size](https://img.shields.io/bundlephobia/min/react-cookify)
Expand All @@ -16,207 +15,13 @@ How to handle GDPR correctly can be found on [Cookies, the GDPR, and the ePrivac
View and test how Cookify works in either [Bootstrap](https://jersyfi.github.io/cookify/test/preview/bootstrap.html) or [Tailwind CSS](https://jersyfi.github.io/cookify/test/preview/tailwindcss.html).

## Documentation

### Get started

#### Installation
Install `react-cookify` via npm.
react-cookify is essentially a set of npm packages.

```bash
npm install react-cookify
```

#### Add Cookify to your App
Start with adding the `CookifyProvider` to your App.

```javascript
import '../styles/globals.css'
import { CookifyProvider } from 'react-cookify'

export default function App({ Component, pageProps }) {
return (
<CookifyProvider options={{
name: 'own-cookify-consent',
types: {
marketing: false,
performance: false,
},
jscookie: {
expires: 365,
path: '/',
secure: true,
}
}}>
<Component {...pageProps} />
</CookifyProvider>
)
}
```

Now add the logic to your Home page.

```javascript
import { useEffect, useState } from 'react'
import { useCookifyProvider, CookifyInput } from 'react-cookify'

export default function Home() {
const {consentObject, consentDisplayed, handleConsentDisplayedChange, consentTracking, actionAccept, actionNecessary, actionAll} = useCookifyProvider()
const [displayedClass, setDisplayedClass] = useState('')

/* CSS not provided in example */
const handleToggle = () => {
if (consentDisplayed) {
setDisplayedClass('block') // block => display: block
} else {
setDisplayedClass('hidden') // hidden => display: none
}
}

/* Display the consent management */
useEffect(() => {
handleToggle()
}, [consentDisplayed])

/* Track the data if needed */
useEffect(() => {
if (consentTracking !== 0) { // Only track after initialization
console.log('Track data here', consentObject)
}
}, [consentTracking])

return (
<>
<button onClick={() => handleConsentDisplayedChange(true)}>
Open Modal
</button>

<div className={displayedClass}>
<div>
<CookifyInput type="checkbox" name="necessary" id="necessary" disabled />
<label htmlFor="necessary">Necessary</label>

<CookifyInput type="checkbox" name="marketing" id="marketing" />
<label htmlFor="marketing">Marketing</label>

<CookifyInput type="checkbox" name="performance" id="performance" />
<label htmlFor="performance">Performance</label>
</div>

<div>
<button onClick={actionAll}>All</button>
<button onClick={actionAccept}>Accept</button>
<button onClick={actionNecessary}>Necessary</button>
</div>
</div>
</>
)
}
```

#### Configure Cookify
All configuration options with its default values.

```typescript
name: 'cookify-consent',
storage: 'cookies', // ['cookies' and 'storage']
saveWithChange: false,
saveByDefault: false,
typeDefault: 'necessary',
types: {
// `necessary: true` will be set automatically
// if `typeDefault` is empty, otherwise it will use the customized `typeDefault` instead of `necessary`
},
// js-cookie attributes
// Only needed when using `storage: 'cookies'`
// More information on https://github.com/js-cookie/js-cookie
jscookie: {
expires: 365,
path: '/',
}
```

### Provider interaction

#### States

##### consentObject
**Type:** consentObject: ConsentObjectType
**Syntax:** consentObject
```bash
console.log(consentObject)

> Object: {
viewed: false,
data: {
'necessary': true,
'marketing': false,
'performance': false,
},
}
```

##### consentDisplayed
**Type:** consentDisplayed: boolean
**Syntax:** consentDisplayed
```bash
console.log(consentDisplayed)

> false
```

##### handleConsentDisplayedChange
**Type:** handleConsentDisplayedChange: (newConsentDisplayed: boolean) => void
**Syntax:** handleConsentDisplayedChange(false)
```javascript
<button onClick={() => handleConsentDisplayedChange(true)}>
Open Modal
</button>
```

##### consentTracking
**Type:** consentTracking: number
**Syntax:** consentTracking
```bash
console.log(consentTracking)

> 0
```

#### Actions

##### actionCheckbox
**Type:** actionCheckbox: (type: string) => void
**Syntax:** actionCheckbox('type')
```javascript
<input
type="checkbox"
name="marketing"
id="marketing"
checked={consentObject.data['marketing']}
onChange={() => actionCheckbox('marketing')}
/>
```

##### actionAccept
**Type:** actionAccept: () => void
**Syntax:** actionAccept
```javascript
<button onClick={actionAccept}>Accept</button>
```

##### actionNecessary
**Type:** actionNecessary: () => void
**Syntax:** actionNecessary
```javascript
<button onClick={actionNecessary}>Necessary</button>
```

##### actionAll
**Type:** actionAll: () => void
**Syntax:** actionAll
```javascript
<button onClick={actionAll}>All</button>
```
To view the complete documentation, please follow the link to [Cookify Docs](https://cookify.jersyfi.dev/).

## Framework Support & Features
You can view all library languages and supported features [here](https://github.com/Jersyfi/cookify#framework-support--features).
Expand Down
Loading

0 comments on commit 21b9ae8

Please sign in to comment.