A set of children-first components

Overview

Children-First Components

This library is currently a work-in-progress to build the React components found in this talk (https://www.youtube.com/watch?v=n62Pc4KV4SM).

You can use this as inspiration or copy-paste directly, but please reference where you got the code (and give me, Kevin Ghadyani, credit) so you can eventually switch over to the library I'll be publishing.

Components & Hooks

Generic Children-First

  • useClonedChild

Picker

  • MultiplePickerProvider
  • PickerSelector
  • SinglePickerProvider
  • usePickerField

Visibility

  • createVisibilityContextKey
  • createVisibilityControlContextKey
  • useAccessibleTarget
  • useAccessibleTrigger
  • useAccessibleVisibility
  • useVisibility
  • useSharedVisibilityContext
  • useSharedVisibilityControlContext
  • useVisibilityControl
  • VisibilityConsumer
  • VisibilityControlProvider
  • VisibilityProvider
  • VisibilityTarget
  • VisibilityTrigger

Implementations

  • HideOnEscapeKey
  • HtmlContent
  • VisibilityContent
You might also like...

This is my first attempt in creating a mern stack ecommerce website. Hope you like it!!

MERN E-COMMERCE PROJECT Hi! My name is Suhrrid Banerjee, This is my first attempt in creating a MERN stack e-commerce website. Prerequisite Nil Env Va

Jan 8, 2022

First smart contract deployed on Rinkeby.

First smart contract deployed on Rinkeby.

Inbox-Contract First smart contract deployed on Rinkeby. It has a basic constructor which accpets a string and assigns the string to the message varia

Dec 26, 2021

My first react project. This is a very simple to-do-list.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Jan 7, 2022

Use Matrix as a backend for local-first applications with the Matrix-CRDT Yjs provider.

Use Matrix as a backend for local-first applications with the Matrix-CRDT Yjs provider.

Matrix CRDT Matrix-CRDT enables you to use Matrix as a backend for distributed, real-time collaborative web applications that sync automatically. The

Jan 7, 2023

Qwerty is the first social website focused on connecting students with similar classes and gender identities

Qwerty is the first social website focused on connecting students with similar classes and gender identities

🌈 Qwerty 🌈 Qwerty is the first social website focused on connecting students with similar classes and gender identities. To get started simply input

Oct 21, 2022

This is my first js calcualtro!!

my-first-js-calculator This is my first js calcualtro!! featurs supports al 4 basic arithrmetic operations (+, -, *, /) supports numbers up to 100 (up

Aug 22, 2022

Awesome TV is the First and Original streaming entertainment network for Global Africa from United States of America (USA).

Awesome TV is the First and Original streaming entertainment network for Global Africa from United States of America (USA).

LEADBOARD APP Awesome TV is the First and Original streaming entertainment network for Global Africa from United States of America (USA). Built With H

Apr 4, 2022

A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item.

Letter Shuffle Animation for a Menu A little animation for a big menu where the letters of a word shuffle to become the first letter of each menu item

Dec 4, 2022
Owner
Kevin Ghadyani
Kevin Ghadyani
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. Why use Preline UI? Based on the Tailwin

Html Stream 1.1k Jan 3, 2023
⚡ the first open-source redis client made with care and acessibility-first 🚀

⚡ Redis UI The first open-source project to create an awesome and accessible UI for Redis as a native desktop application. ✨ ?? ?? How to develop loca

Nicolas Lopes Aquino 14 Dec 5, 2022
SET Revision is a website to help you identify "sets" in the card game SET.

Welcome to SET Revision! SET Revision is a website to help you identify "sets" in the card game SET. The code in this repository is aimed for learners

Benjamin Piper 2 Oct 3, 2022
SUID is all a set of utils and components ported from MUI Core and much more.

Solid.js User Interface Design (SUID) A port of Material-UI (MUI) built with Solid.js SUID is all a set of utils and components ported from MUI Core a

null 311 Jan 1, 2023
Backgrid.js is a set of components for building semantic and easily stylable data grid widgets

Backgrid.js is a set of components for building semantic and easily stylable data grid widgets. It offers a simple, intuitive programming interface that makes easy things easy, but hard things possible when dealing with tabular data.

Cloudflare Archive 2k Nov 21, 2022
A set of common UI Components using the power of CSS and without Javascript

A set of common UI Components using the power of CSS and without Javascript

Felipe Fialho 650 Dec 31, 2022
A Open Source API for hadiths in Bangla for the first time.

Hadith API A API for hadiths in bengali language for the first time! From this API you will get: Hadith narrator Hadith number Hadith authenticity API

Md. Rakibur Rahman Talukder 21 Dec 13, 2022
SEE WHO GETS TO A SCORE OF A 100 FIRST

PIG-GAME RULES 1 . The main goal is to reach a score equal or above to a 100. 2 . To play, click on the button named " ROLL DICE ". 3 . To hold your s

Daniel Dukundane 6 Jun 12, 2021
A refined tool for exploring open-source projects on GitHub with a file tree, rich Markdown and image previews, multi-pane multi-tab layouts and first-class support for Ink syntax highlighting.

Ink codebase browser, "Kin" ?? The Ink codebase browser is a tool to explore open-source code on GitHub, especially my side projects written in the In

Linus Lee 20 Oct 30, 2022
Next-gen mobile first analytics server (think Mixpanel, Google Analytics) with built-in encryption supporting HTTP2 and gRPC. Node.js, headless, API-only, horizontally scaleable.

Introduction to Awacs Next-gen behavior analysis server (think Mixpanel, Google Analytics) with built-in encryption supporting HTTP2 and gRPC. Node.js

Socketkit 52 Dec 19, 2022