Size: a a a

React — русскоговорящее сообщество

2021 March 03

OF

Oleg Frolov in React — русскоговорящее сообщество
может кому пригодится. Сделал компонент селекта: https://github.com/o-mega/artof-select . Он в 3.5 раза легче реакт-селекта, в 4 раза легче материал-юи селекта.

Делает из коробки кучу всяких ништяков, в т.ч. мультиселект, поддерживает кастомный вывод опций и выбранных элементов, и на 90% покрыт тестами. Также отлавливает управление с клавиатуры, и есть возможность поиска по опциям (как на лету, так и через прямой ввод названия). А самое главное - по типизации на выходе это тот же HTMLSelectElement и все нативные события к хтмл селекту обрабатываются как положено в этой удобной обёртке.

Буду рад конструктивным предложениям по дальнейшему улучшению компонента 🙂
источник

MS

Maq Stein in React — русскоговорящее сообщество
Здравствуйте, кто нибудь сталкивался с тем, что автопереводчик (google или яндекса) преводит часть кода на странице?
источник

Т

Тимофей 🛴 in React — русскоговорящее сообщество
Oleg Frolov
может кому пригодится. Сделал компонент селекта: https://github.com/o-mega/artof-select . Он в 3.5 раза легче реакт-селекта, в 4 раза легче материал-юи селекта.

Делает из коробки кучу всяких ништяков, в т.ч. мультиселект, поддерживает кастомный вывод опций и выбранных элементов, и на 90% покрыт тестами. Также отлавливает управление с клавиатуры, и есть возможность поиска по опциям (как на лету, так и через прямой ввод названия). А самое главное - по типизации на выходе это тот же HTMLSelectElement и все нативные события к хтмл селекту обрабатываются как положено в этой удобной обёртке.

Буду рад конструктивным предложениям по дальнейшему улучшению компонента 🙂
Спасибо что без emotion и redux в зависимостях
источник

OF

Oleg Frolov in React — русскоговорящее сообщество
Тимофей 🛴
Спасибо что без emotion и redux в зависимостях
там по зависимостям ещё половину выпилю. Изначально делал компонент под конкретный проект на скорую руку, больше упора на ф-ционал пилил. На выходе конечно же заоптимизировал, чтобы не тащило лишнего.. но вот по дев зависимостям ещё пройдусь в ближайшее время
источник

И

Иван in React — русскоговорящее сообщество
Enero
Я не собираюсь тут сидеть и доказывать что-то, но на некоторых собеседованиях такую задачку дают.
А как звучит задачка? Какую проблему решают разрывом ссылок?
источник

Т

Тимофей 🛴 in React — русскоговорящее сообщество
Иван
А как звучит задачка? Какую проблему решают разрывом ссылок?
Проход собеседования у доебчивого лида
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Oleg Frolov
может кому пригодится. Сделал компонент селекта: https://github.com/o-mega/artof-select . Он в 3.5 раза легче реакт-селекта, в 4 раза легче материал-юи селекта.

Делает из коробки кучу всяких ништяков, в т.ч. мультиселект, поддерживает кастомный вывод опций и выбранных элементов, и на 90% покрыт тестами. Также отлавливает управление с клавиатуры, и есть возможность поиска по опциям (как на лету, так и через прямой ввод названия). А самое главное - по типизации на выходе это тот же HTMLSelectElement и все нативные события к хтмл селекту обрабатываются как положено в этой удобной обёртке.

Буду рад конструктивным предложениям по дальнейшему улучшению компонента 🙂
Быстро просмотрел, я так понимаю рендер пропа для своего рендера опшина нету?
источник

OF

Oleg Frolov in React — русскоговорящее сообщество
Maxim Koylo
Быстро просмотрел, я так понимаю рендер пропа для своего рендера опшина нету?
есть, можно передать компонент как опцию
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Oleg Frolov
есть, можно передать компонент как опцию
как пропс называется?
источник

OF

Oleg Frolov in React — русскоговорящее сообщество
собсна, опция принимает label: ReactText, value: string, component?: ReactNode
источник

OF

Oleg Frolov in React — русскоговорящее сообщество
Maxim Koylo
как пропс называется?
SelectOption = {
 label?: ReactText;
 value?: ReactText;
 component?: ReactNode;
};
источник

E

Evgeniy 🍀 in React — русскоговорящее сообщество
Тимофей 🛴
Проход собеседования у доебчивого лида
Нас наебали, расходимся, на самом деле такое:

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

console.log(bar); // { n: 2 }
console.log(foo); // { n: 1, x: { n: 2 } }
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Oleg Frolov
может кому пригодится. Сделал компонент селекта: https://github.com/o-mega/artof-select . Он в 3.5 раза легче реакт-селекта, в 4 раза легче материал-юи селекта.

Делает из коробки кучу всяких ништяков, в т.ч. мультиселект, поддерживает кастомный вывод опций и выбранных элементов, и на 90% покрыт тестами. Также отлавливает управление с клавиатуры, и есть возможность поиска по опциям (как на лету, так и через прямой ввод названия). А самое главное - по типизации на выходе это тот же HTMLSelectElement и все нативные события к хтмл селекту обрабатываются как положено в этой удобной обёртке.

Буду рад конструктивным предложениям по дальнейшему улучшению компонента 🙂
Для тега еще бы добавить возможность удаления через сам тег, а не через дропдаун
источник

OF

Oleg Frolov in React — русскоговорящее сообщество
Maxim Koylo
Для тега еще бы добавить возможность удаления через сам тег, а не через дропдаун
там есть такая возможность: очищать все теги. Также можно сделать кастомный рендер https://o-mega.github.io/artof-select/?path=/story/artof-select--custom-value - тут вот можно по каждому тегу отдельно удалять.
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Oleg Frolov
там есть такая возможность: очищать все теги. Также можно сделать кастомный рендер https://o-mega.github.io/artof-select/?path=/story/artof-select--custom-value - тут вот можно по каждому тегу отдельно удалять.
не если бы уже встроенно было типо просто флаг что бы отображать крестик в теге
источник

OF

Oleg Frolov in React — русскоговорящее сообщество
хм, подумаю спасибо! сделать изи, в общем-то
источник

TL

Tema Lidkovsky in React — русскоговорящее сообщество
Всем доброго! Подскажите, пожалуйста, как мне загуглить подобную ситуацию. И нормальная ли это практика вообще? У меня форма в которой через switch рендерится определенный компонент. В этом компоненте рендер заголовка и инпутов, которые тоже сделаны как компоненты. Как мне передать handleChange из этой формы сразу к компонетам инпутов? Или  так делать не стоит и все инпуты руками прописывать?
источник

SA

S. A. M. in React — русскоговорящее сообщество
ребят вопрос архитектурного типа: кто юзал react-i18n по вашему как лучше писать текст, в виде ключа (например, LOGIN_TITLE, PASS_TITLE) и потом сделать перевод на нужные языки включая английский, либо сам текст на английском (Login, Password), а в тех местах где повторяется текст использовать ключ?
источник

MK

Maxim Koylo in React — русскоговорящее сообщество
Tema Lidkovsky
Всем доброго! Подскажите, пожалуйста, как мне загуглить подобную ситуацию. И нормальная ли это практика вообще? У меня форма в которой через switch рендерится определенный компонент. В этом компоненте рендер заголовка и инпутов, которые тоже сделаны как компоненты. Как мне передать handleChange из этой формы сразу к компонетам инпутов? Или  так делать не стоит и все инпуты руками прописывать?
у тебя там настолько большая форма что прописывать каждый компонент руками сложно?
источник

TL

Tema Lidkovsky in React — русскоговорящее сообщество
Maxim Koylo
у тебя там настолько большая форма что прописывать каждый компонент руками сложно?
да форма это мягко сказано. Много чекбоксов и двойных ренджей. Тут 6 экранов подобного:
источник