DEV Community: Burak Gür

How to use Tabler Icons in your React Native project?

Burak Gür — Sun, 04 Feb 2024 21:09:28 +0000

Hi there,

Today, I will show you how to implement Tabler Icons in your React Native project. First of all, we need to add the tabler-react-native package to our project.

yarn add tabler-react-native

And that's it. Later, we can use Tabler Icons just like the official React package.

import { IconArrowLeft } from 'tabler-react-native/icons';

const App = () => {
  return (
    <View>
      <IconArrowLeft />
    </View>
  );
};
export default App;

You can pass additional props to adjust the icon.

<IconArrowLeft color="red" size={48} size={2} />

Here is the full list of icons: Tabler Icons

This is the React Native Tabler Icons package: react-native-tabler

Thanks for reading 😊

Create ToDo App With Nuxt 3 Composition API

Burak Gür — Sat, 02 Jul 2022 07:05:45 +0000

Hi there again,
Together we will develop the Nuxt 3 version of the Create ToDo App With Vue 3 Composition API blog post I wrote earlier.

1. Let's create the Nuxt 3 application.

npx nuxi init nuxt-app
cd nuxt-app
yarn install

2. Install the required packages and configure its.

yarn add -D sass sass-loader #for sass
yarn add cookie-universal-nuxt #for cookie

nuxt.config.ts

export default defineNuxtConfig({
  modules: [
      'cookie-universal-nuxt',
  ]
})

3. Create form and todo list in app.vue.

<template>
  <h1>ToDo App</h1>
  <form @submit.prevent="addTodo()">
    <label>New ToDo </label>
    <input v-model="newTodo" name="newTodo" autocomplete="off" />
    <button @click="addTodo()">Add ToDo</button>
  </form>
  <h2>ToDo List</h2>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      <span :class="{ done: todo.done }" @click="doneTodo(todo)">{{ todo.content }}</span>
      <button @click="removeTodo(index)">Remove</button>
    </li>
  </ul>
  <h4 v-if="todos.length === 0">Empty list.</h4>
</template>

4. With Nuxt 3's auto import feature, we no longer need to import packages. We just need add setup attribute to script tag.

<script setup>
  // all logic code in here
</script>

5. Create all property and methods. We use $cookies for data saving and useHead for meta tags. $cookies come from the cookie-universal-nuxt package and useHead comes in nuxt.

<script setup>
const newTodo = ref('')
const defaultData = [
  {
    done: true,
    content: 'Write a blog post'
  },
  {
    done: false,
    content: 'Listen a podcast'
  }
]
const { $cookies } = useNuxtApp()
const todosData = $cookies.get('todos') || defaultData
const todos = ref(todosData)
function addTodo() {
  if (newTodo.value) {
    todos.value.push({
      done: false,
      content: newTodo.value
    })
    newTodo.value = ''
  }
  saveData()
}
function doneTodo(todo) {
  todo.done = !todo.done
  saveData()
}
function removeTodo(index) {
  todos.value.splice(index, 1)
  saveData()
}
function saveData() {
  $cookies.set('todos', todos.value)
}
useHead({
  title: 'ToDo App',
  meta: [
    {
      name: 'description',
      content: 'Nuxt 3 ToDo App with Composition API'
    }
  ]
})
</script>

6. Also we add some SCSS code.

<style lang="scss">
$border: 2px solid
  rgba(
    $color: white,
    $alpha: 0.35
  );
$size1: 6px;
$size2: 12px;
$size3: 18px;
$size4: 24px;
$size5: 48px;
$backgroundColor: #27292d;
$textColor: white;
$primaryColor: #a0a4d9;
$secondTextColor: #1f2023;
body {
  margin: 0;
  padding: 0;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: $backgroundColor;
  color: $textColor;
  #__nuxt {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    h1 {
      font-weight: bold;
      font-size: 28px;
      text-align: center;
    }
    form {
      display: flex;
      flex-direction: column;
      width: 100%;
      label {
        font-size: 14px;
        font-weight: bold;
      }
      input,
      button {
        height: $size5;
        box-shadow: none;
        outline: none;
        padding-left: $size2;
        padding-right: $size2;
        border-radius: $size1;
        font-size: 18px;
        margin-top: $size1;
        margin-bottom: $size2;
      }
      input {
        background-color: transparent;
        border: $border;
        color: inherit;
      }
    }
    button {
      cursor: pointer;
      background-color: $primaryColor;
      border: 1px solid $primaryColor;
      color: $secondTextColor;
      font-weight: bold;
      outline: none;
      border-radius: $size1;
    }
    h2 {
      font-size: 22px;
      border-bottom: $border;
      padding-bottom: $size1;
    }
    ul {
      padding: 10px;
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border: $border;
        padding: $size2 $size4;
        border-radius: $size1;
        margin-bottom: $size2;
        span {
          cursor: pointer;
        }
        .done {
          text-decoration: line-through;
        }
        button {
          font-size: $size2;
          padding: $size1;
        }
      }
    }
    h4 {
      text-align: center;
      opacity: 0.5;
      margin: 0;
    }
  }
}
</style>

That's it.

See demo:

Demo: https://nuxt3-composition-api-todo-app.vercel.app/

Repo: https://github.com/BurakGur/nuxt3-composition-api-todo-app

My GitHub: https://github.com/BurakGur

Thanks for reading 😊

Create ToDo App With Vue 3 Composition API

Burak Gür — Mon, 04 Jan 2021 15:18:47 +0000

Hi there,
I will show you how to create todo app with composition api. Composition api is new feature to Vue.js and it's like React Hooks.

Let's build app.

1. Create new Vue 3 project with Vue CLI.



vue create-app todo-app

2. Create form and todo list in App.vue.



<template>
    <h1>ToDo App</h1>
    <form @submit.prevent="addTodo()">
        <label>New ToDo </label>
        <input
            v-model="newTodo"
            name="newTodo"
            autocomplete="off"
        >
        <button>Add ToDo</button>
    </form>
    <h2>ToDo List</h2>
    <ul>
        <li
            v-for="(todo, index) in todos"
            :key="index"
        >
            <span
                :class="{ done: todo.done }"
                @click="doneTodo(todo)"
            >{{ todo.content }}</span>
            <button @click="removeTodo(index)">Remove</button>
        </li>
    </ul>
    <h4 v-if="todos.length === 0">Empty list.</h4>
</template>

3. Import ref package. Takes an inner value and returns a reactive and mutable ref object.



<script>
import { ref } from 'vue';
</script>

4. The setup function is a new component option. Create setup function.



<script>
import { ref } from 'vue';
export default {
  name: 'App',
  setup () {
  }
}
</script>

5. Create all property and methods. Also we use localStorage for data saving.



<script>
    import { ref } from 'vue';
    export default {
        name: 'App',
        setup () {
            const newTodo = ref('');
            const defaultData = [{
                done: false,
                content: 'Write a blog post'
            }]
            const todosData = JSON.parse(localStorage.getItem('todos')) || defaultData;
            const todos = ref(todosData);
            function addTodo () {
                if (newTodo.value) {
                    todos.value.push({
                        done: false,
                        content: newTodo.value
                    });
                    newTodo.value = '';
                }
                saveData();
            }
            function doneTodo (todo) {
                todo.done = !todo.done
                saveData();
            }
            function removeTodo (index) {
                todos.value.splice(index, 1);
                saveData();
            }
            function saveData () {
                const storageData = JSON.stringify(todos.value);
                localStorage.setItem('todos', storageData);
            }
            return {
                todos,
                newTodo,
                addTodo,
                doneTodo,
                removeTodo,
                saveData
            }
        }
    }
</script>

That's it. Also i add some SCSS code in App.vue. See demo:

Demo: https://todo-app.burakgur.vercel.app/

Repo: https://github.com/BurakGur/vue3-composition-api-todo-app

Thanks for reading 😊

How to use Google One Tap in your React or Vue project?

Burak Gür — Fri, 01 Jan 2021 16:52:35 +0000

Hi there,
I will show you how to use Google One Tap in your project. For this, i use my own npm package google-one-tap.

Get your Google API client ID

Open the "Credentials" page of the Google APIs console.
Create or select a Google APIs project. If you already have a Google Sign-In button, use the existing project and the web client ID.

1. Install package on your project.



npm install google-one-tap



yarn add google-one-tap

2. After this, import package.



import googleOneTap from 'google-one-tap';

3. Use googleOneTap method with options.



const options = {
    client_id: '___CLIENT_ID___', // required
    auto_select: false, // optional
    cancel_on_tap_outside: false, // optional
    context: 'signin' // optional
};

googleOneTap(options, (response) => {
    // Send response to server
    console.log(response);
});

Vue.js Full Code Example



import googleOneTap from 'google-one-tap';
export default {
    mounted() {
        const options = {
            client_id: '___CLIENT_ID___', // required
            auto_select: false, // optional
            cancel_on_tap_outside: false, // optional
            context: 'signin', // optional
        };
        googleOneTap(options, (response) => {
            // Send response to server
            console.log(response);
        });
    },
};

After all this, you must send response to server.

Node.js Server Example



const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client(CLIENT_ID);
async function verify() {
    const ticket = await client.verifyIdToken({
        idToken: token,
        audience: CLIENT_ID, // Specify the CLIENT_ID of the app that accesses the backend
        // Or, if multiple clients access the backend:
        //[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3]
    });
    const payload = ticket.getPayload();
    const userid = payload['sub'];
    // If request specified a G Suite domain:
    // const domain = payload['hd'];
}
verify().catch(console.error);

Thanks for reading 😊