DEV Community: Ozan Yurtsever

Custom React Hook to Check Nested Child Component Types

Ozan Yurtsever — Fri, 24 Jun 2022 06:25:08 +0000

A component may want to make assumptions about its children to satisfy layout constraints. This custom hook helps you to determine if there is any nested child with a specific type, and returns you the nested child itself to apply any layout constraints to it while rendering.

Usage

import useChild from 'use-child';

const Car = props => {
  const [wheelExists, WheelComponent] = useChild(props.children, Wheel);
  const [engineExists, EngineComponent] = useChild(props.children, Engine);

  return (
    <div>
      {wheelExists && WheelComponent}
      {engineExists && EngineComponent}
    </div>
  );
};

const Wheel = () => {
  return <div>I am a wheel</div>;
};

const Engine = () => {
  return <div>I am an engine</div>;
};

ozanyurtsever / use-child

A custom react hook to check nested child component types

`use-child`

React hook for getting the type of any nested child component

Install

npm install use-child

Usage

import useChild from 'use-child';
const Car = props => {
  const [wheelExists, WheelComponent] = useChild(props.children, Wheel);
  const [engineExists, EngineComponent] = useChild(props.children, Engine);

  return (
    <div>
      {wheelExists && WheelComponent}
      {engineExists && EngineComponent}
    </div>
  );
};

const Wheel = () => {
  return <div>I am a wheel</div>;

…

View on GitHub

Verbum - Rich Text Editor For React

Ozan Yurtsever — Tue, 21 Jun 2022 11:36:23 +0000

Until this year, draft.js was one of the mainly used libraries out there for building web based text editors, and there are lots of component libraries for React based on draft.js. However, the development team(which is facebook) has announced that the project is not under development anymore, since they have started a brand new project, which is Lexical. Lexical is a framework to build text editors and is under early development currently. By using Lexical, I have built a new component library that comes with a ready to use rich text editor. It is under very early development as well, as I am trying to make it more modular and flexible with each improvement. I hope this project can help some startups that needs to implement a highly functional text editor to their projects. All of the support(like stars) and contribution to the project is very much welcomed.

ozanyurtsever / verbum

Verbum is a fully flexible text editor based on lexical framework.

Verbum

Verbum - Flexible Text Editor for React

Verbum is a fully flexible text editor based on lexical framework.

⚠️ As the Lexical framework is currently in early development, this component library is also likely to change quite often

Installation

npm install verbum --save

Demo

Live demo is coming soon...

Usage

import { FC } from 'react';
import { EditorComposer, Editor, ToolbarPlugin } from 'verbum';

const NoteViewer: FC = () => {
  return (
    <EditorComposer>
      <Editor hashtagsEnables={true}>
        <ToolbarPlugin defaultFontSize="20px">
          <InsertDropdown enablePool={true} />
          <AlignDropdown />
        <ToolbarPlugin />
      </Editor>
    </EditorComposer>
  );
};

export default NoteViewer;

API

<Editor />

Property	Type	description
children	`ReactNode`	optional	Nested child components, like the `ToolbarPlugin`.
hashtagsEnabled	`boolean`	optional	Enables

…

View on GitHub

A Simple Script to Automate Instagram Unfollowing

Ozan Yurtsever — Tue, 12 Mar 2019 12:01:09 +0000

Hello everyone. I have coded a simple Python script to automate Unfollowing process on Instagram. Please go to my project via following GitHub link;

ozanyurtsever / instagram_unfollower

A Python script to unfollow users who you follow but they don't follow you back on Instagram. Works with Selenium, without using Instagram API.

Instagram Unfollower

A Python script designed to unfollow users who you follow but they don't follow you back. Works with Selenium, without using Instagram API.

How to Use it ?

You will run the program with main.py file, just open the code and change the username and password variables with your account's infos. It's best to have InstaUnfollower.py and main.py in the same directories.

Requirements

Python 3.X on your device
Python version of Selenium should be installed ( pip install selenium )
Geckodriver should be installed ( https://github.com/mozilla/geckodriver/releases )
geckodriver executable file should have been added on the PATH ( adding it on the PATH differs according to your OS)
Firefox Browser should be installed.

View on GitHub

Instagram Unfollower

A Python script designed to unfollow users who you follow but they don't follow you back. Works with Selenium, without using Instagram API.

How to Use it ?

Requirements

Python 3.X on your device
Python version of Selenium should be installed ( pip install selenium )
Geckodriver should be installed ( https://github.com/mozilla/geckodriver/releases )
geckodriver executable file should have been added on the PATH ( adding it on the PATH differs according to your OS)
Firefox Browser should be installed.