MJ Studio

Library

There are so many libraries I created only for me :(

React Design Toolkit

Since 2024 - 03

Contribution 100%

An opinioned design system toolkit tailored for React applications using Next.js This package is top of the Chakra UI, incorporating related libraries internally. The all libraries are dependency of chakra-ui itself. You should install peer dependencies for it works correctly.

Tech

Design Systemstyled-componentstyled-systemchakra-uicookie

Languages

TypeScript

React Native Styled System

Since 2024 - 03

Contribution 80%

React Native Styled System-image-1

Is it possible to use styled-system in React Native? This is a library I created while thinking about it. Through Docusaurus, Docs are beautifully translated and decorated, and it is a library that boasts considerable efficiency.

Tech

React Native

Languages

TypeScript

ESLint Config

Since 2024 - 02

Contribution 100%

ESLint config for Node.js, React Native and React We created a common module to easily set up ESLint, which is commonly used in many projects. Each project has dependencies on each other. Node <- React <- React Native

Tech

ESLint

Languages

TypeScript

Flutter PencilKit

Since 2023 - 12

Contribution 100%

Flutter PencilKit-image-1

This is a plugin package that integrates iOS PencilKit into Flutter. It seems that people are quite interested, so several PRs have been posted and there are users. Originally, I uploaded the library and only used it, but this time, I participated in community activities by receiving opinions from other users, conducting code reviews, and adding Base64 Data Save/Load functions that did not exist before.

Features

Drawing

Tech

FlutteriOSPencilKit

Languages

DartSwift

Flutter Local File Preferences

Since 2023 - 11

Contribution 100%

A simple Flutter file system data synchronization library. It was fun to create a document page using Docusarus. This package is useful in my personal projects. Below is a description of the package: This package is utility for saving and loading json format data into local file system easily. You have to provide toJson, fromJson of your data type. Then, this package provides load, save, scheduleSave and getter or setter of your data.

Features

Data

Tech

Flutter

Languages

Dart

JavaScript Utility

Since 2023 - 05

Contribution 100%

This is a package that contains frequently used utilities related to JavaScript. I wrote quite a bit of test code and it is useful.

Tech

PromiseTimerCollection

Languages

TypeScript

react-native-spannable-string

Since 2020 - 06

Contribution 100%

react-native-spannable-string-image-1

React Native's Text component processes components that come in as children as Inline rather than Flexbox, and if it is another Text component, you can use SpannableString for Android and NSMutableString for iOS to style the strings with only a few characters different. This is a utility library created to make it easy to use. Please refer to GitHub for detailed explanation.

Features

Spannable string for React Native

Tech

ESlintPrettierTypeScriptReact Native Text

Languages

Typescript

react-native-scaled-layout

Since 2020 - 03

Contribution 100%

This is a library developed in React Native that automatically adjusts the size of the view so that it can be displayed as text and components of similar sizes on tablets and other devices of different sizes. You can check out more details on GitHub, and I also wrote about this on Medium. Now that my perspective on Responsive Layout has changed, I do not use it.

Features

Scaleable units for React applicationsScaledText

Tech

EslintPrettierTypescriptTypescript type augmentationJavascript monkey patch

Languages

TypescriptJavascript

react-native-rest-util

Since 2020 - 03

Contribution 100%

When using Rest API in a project, it is cumbersome to use Fetch as is, so this is a library that allows you to easily send requests, receive data, handle errors, or display loading using React's Hook API based on fetch. With the function called setApiDefaultSettings, you can set the desired settings for network requests, and it has many functions, such as automatically changing the response from snake_case to camelCase. We worked hard to create the library and write test code, so the coverage is 100% and it will be fun to look at the code. I am using it very well in the Math King React Native project that I am currently developing.

Features

React custom hook for REST api

Tech

EsLintTypeScript@testing-library/react-hooksjestreactprettierabortcontroller-polyfill

Languages

Typescript

PlayableRecyclerView

Since 2020 - 01

Contribution 100%

PlayableRecyclerView-image-1

Since there is no out-of-box solution to play videos in RecyclerView, I created a library. Although ExoPlayer operates internally, it was designed so that videos can be easily produced with other engines through several abstraction steps. I also created several concepts such as Playable, PlayablePlayer, and PlayableView, and it was fun. You can see more detailed code on GitHub.

Features

Play video in RecyclerViewAuto play & pause by scroll offset

Tech

RecyclerViewExoPlayer

Languages

Kotlin

NumberMarbleView

Since 2019 - 10

Contribution 100%

NumberMarbleView-image-1

This is an Android custom view that can display a numbered, bead-like round view in horizontal/vertical directions.

Features

CustomViewNumbered marbles

Tech

Android View API

Languages

Kotlin

OroraImageView

Since 2019 - 10

Contribution 100%

OroraImageView-image-1

This is a library that can use Android's RenderScript API to express a drop shadow on an image in the basic image view by giving it multiple colors, blur radius, and offset.

Features

Drop shadow Android ImageView

Tech

RenderScript

Languages

KotlinC99