Скачать react collection helpers react collection helpers

React Collection Helpers

Набор композиционных компонентов для манипулирования коллекциями.

Быстрый пример

 import { Filter , Sort , First } from 'react-collection-helpers' ;

const users = [
  { id : 'a' , name : 'Harry' , lastMessagedAt : '2016-03-14T15:00' , isOnline : true } ,
  { id : 'b' , name : 'Bob' , lastMessagedAt : '2017-01-20T12:00' , isOnline : false } ,
  { id : 'c' , name : 'Molly' , lastMessagedAt : '2013-01-02T03:04' , isOnline : false } ,
  { id : 'd' , name : 'Karrin' , lastMessagedAt : '2017-01-12T11:05' , isOnline : true } ,
  { id : 'e' , name : 'Thomas' , lastMessagedAt : '2014-03-04T13:37' , isOnline : true } ,
]

const UserList = ( { users } ) => (
  < Filter collection = { users } predicate = { { isOnline : true } } >
    < Sort comparator = "lastMessagedAt" >
      < First num = { 4 } >
        { user => < div key = { user . id } > { user . name } </ div > }
      </ First >
    </ Sort >
  </ Filter >
)

ReactDOM . render (
  < UserList users = { users } > ,
  document.querySelector('#root')
)

/*
  Renders:

  < div >
    < div > Karrin </ div >
    < div > Harry </ div >
    < div > Thomas </ div >
  </ div >
*/

Живая демонстрация

Играйте с живой демонстрацией.

Функции
Недостатки
Установка
Обратная связь разыскивается
Использование
Гиды
- Понимание и настройка разметки
- Предустатки в сборе сбора RACT
- Компараторы в сборе сбора реагирования
Ссылка на API
- <Every>
- <Filter>
- <Find>
- <First>
- <Last>
- <Map>
- <Reject>
- <Reverse>
- <Some>
- <Sort>

Функции

Полезно - включает в себя 10+ компонентов, которые помогут вам фильтровать, сортировку и съемки.
✒ Designer Friendy - упростите жизнь ваших дизайнеров, написав компоненты без сложной встроенной логики.
⚡ Tiny - Полная сборка составляет всего 2,5 КБ, и модульная, так что вы можете импортировать только необходимые вам компоненты.
? Выступление - эксперименты показывают, что эти компоненты так же исполнены, как и нативные методы.
? Настраиваемый - элемент обертки может быть любым типом элемента, который вы хотели бы (нативно или композитно), и все непозначенные реквизиты проходят через. Создание помощников коллекции не создает дополнительную HTML -разметку!

Недостатки

Таким образом, React Collection Helpers - это эксперимент, предназначенный для проверки, имеет ли смысл компонентной модели React при использовании для манипуляции с массивом.

Я считаю, что это лучше по причинам, изложенным выше, чем манипулирование ванилью JS в методе рендеринга вашего компонента. Тем не менее, это часто неправильное место, чтобы делать такую логику .

Для очень больших коллекций или для компонентов, которые часто повторно распространяются, имеет смысл перемещать такого рода интенсивные манипуляции в памятные функции. Если вы используете Redux, то RESELECT, вероятно, является лучшим местом для выполнения такой работы.

Это также означает, что ваш уровень презентации никогда не должен беспокоиться о этой работе, что обычно является хорошей вещью.

Для небольших приложений (или простых разделов в больших приложениях), помощники сбора коллекций React могут быть приятным прикосновением. Однако для приложений Redux часто бывает лучшим способом.

В конечном счете, React Collection Helpers построен в качестве отправной точки, а не конечным пунктом назначения. Я чувствую, что с достаточным количеством проб и ошибок мы могли бы наткнуться на что -то действительно инновационное и полезное. Я собираюсь продолжать экспериментировать, и я бы посоветовал нам всех сохранять непредвзятость и взглянуть на захватывающие новые возможности.

Установка

 npm i -S react-collection-helpers

Сборки UMD также доступны через CDN:

Реакционные сборы-helpers.js
React-Collection-helpers.min.js

(Если вы используете сборку UMD, глобальная переменная - это CollectionHelpers )

Обратная связь разыскивается

Этот проект является экспериментом по проверке полезности манипуляторов сбора в форм -факторе компонента.

Когда я говорю, что это эксперимент, я не обязательно имею в виду, что это экспериментально . Я очень уверен, что он стабилен и безопасен в производстве; Код довольно прост.

Скорее, я имею в виду, что я не убежден, что это решает реальную проблему. Я хотел бы услышать от пользователей, которые их реализуют; Улучшает ли это опыт разработки вас или вашей команды? Как вы думаете, идея имеет потенциал, если она пошла в определенном направлении? Я открыт для изучения тангенциальных идей.

Дайте мне знать в Твиттере или по электронной почте

Использование

Импортируйте необходимый компонент:

 // ES6 modules
import { Find , Every , Map } from 'react-collection-helpers' ;

// CommonJS
const { Find , Every , Map } = require ( 'react-collection-helpers' ) ;

В качестве альтернативы, вы можете импортировать компоненты индивидуально, чтобы избежать объединения компонентов, которые вы не используете:

 // This method avoids bundling unused components, and reduces gzipped bundles
// by about 1kb.
import Find from 'react-collection-helpers/lib/components/Find' ;
import Every from 'react-collection-helpers/lib/components/Every' ;
import Map from 'react-collection-helpers/lib/components/Map' ;

Гиды

Узнайте больше о том, как лучше всего использовать помощников по сбору React с этими углубленными гидами:

Понимание и настройка разметки
Предустатки в сборе сбора RACT
Компараторы в сборе сбора реагирования

Ссылка на API

`<Every>`

Оставить детей, если предикат вернется для каждого ребенка. Можно предоставить запасной узел, который будет отображаться, если предикат возвращает ложные для любого ребенка. В противном случае ничего не будет отображено.

Если предикат не предоставляется, содержание будет отображаться до тех пор, пока в коллекции есть 1 элемент или более. Если будет предоставлена пустая коллекция, будет отображаться запасной контент.

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции
`predicate`	✕	`function` / `object`	Смотрите предикаты для получения дополнительной информации
`fallback`	✕	`node`	Альтернативный контент, который будет отображаться, если предикат возвращает false по любым элементам.

Пример

 const collection = [
  { id : 'a' , src : '...' , isLoaded : true } ,
  { id : 'b' , src : '...' , isLoaded : true } ,
  { id : 'c' , src : '...' , isLoaded : false } ,
] ;

< Every
  collection = { collection }
  predicate = { { isLoaded : true } }
  fallback = { < span > Loading... </ span > }
>
  { item => < img key = { item . id } src = { item . src } /> }
</ Every >

`<Filter>`

Рендер только детей, для которых предикат true .

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции
`predicate`	✓	`function` / `object`	Смотрите предикаты для получения дополнительной информации

Пример

 const collection = [
  { id : 'a' , name : 'apple' , price : 1.00 } ,
  { id : 'b' , name : 'banana' , price : 5.00 } ,
  { id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Filter collection = { collection } predicate = { item => ( item . price < 3 ) } >
  { item => < div key = { item . id } > { item . name } </ div > }
</ Filter >

`<Find>`

Отводите первого ребенка, для которого предикат true .

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции
`predicate`	✓	`function` / `object`	Смотрите предикаты для получения дополнительной информации

Пример

 const collection = [
  { id : 'a' , name : 'John' , isAdmin : false } ,
  { id : 'b' , name : 'Jane' , isAdmin : true } ,
  { id : 'c' , name : 'Jala' , isAdmin : false } ,
] ;

< Find collection = { collection } predicate = { { isAdmin : true } } >
  { user => < div key = { user . id } > Your group's admin is { user . name } </ div > }
</ Find >

`<First>`

Возвращает первые 1 или более предметов коллекции. Обычно полезно только в детстве другого помощника коллекции.

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции
`num`	✕	`number`	По умолчанию `1`

Пример

 const collection = [
  { id : 'a' , name : 'John' , distance : 3.14 } ,
  { id : 'b' , name : 'Jane' , distance : 0.45 } ,
  { id : 'c' , name : 'Jala' , distance : 1.23 } ,
] ;

< Sort collection = { collection } comparator = "distance" >
  < First >
    { user => < div key = { user . id } > You are closest to { user . name } </ div > }
  </ First >
</ Sort >

`<Last>`

Возвращает последние 1 или более предметов коллекции. Противоположность <First> . Обычно полезно только в детстве другого помощника коллекции.

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции
`num`	✕	`number`	По умолчанию `1`

Пример

 const collection = [
  { id : 'a' , name : 'John' , distance : 3.14 } ,
  { id : 'b' , name : 'Jane' , distance : 0.45 } ,
  { id : 'c' , name : 'Jala' , distance : 1.23 } ,
] ;

< Sort collection = { collection } comparator = "distance" >
  < Last >
    { user => < div key = { user . id } > You are furthest from { user . name } </ div > }
  </ Last >
</ Sort >

`<Map>`

Самый простой помощник коллекции, не очень много. Может быть полезен для обеспечения согласованности между вашим компонентами.

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции

Пример

 const collection = [
  { id : 'a' , name : 'John' } ,
  { id : 'b' , name : 'Jane' } ,
  { id : 'c' , name : 'Jala' } ,
] ;

< Map collection = { collection } >
  { user => < div key = { user . id } > { user . name } </ div > }
</ Map >

`<Reject>`

Рендер только детей, для которых предикат возвращает false . Противоположность <Filter> .

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции
`predicate`	✓	`function` / `object`	Смотрите предикаты для получения дополнительной информации

Пример

 const collection = [
  { id : 'a' , name : 'apple' , price : 1.00 } ,
  { id : 'b' , name : 'banana' , price : 5.00 } ,
  { id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Reject collection = { collection } predicate = { item => ( item . price > 3 ) } >
  { item => < div key = { item . id } > { item . name } </ div > }
</ Reject >

`<Some>`

Оставить детей, если предикат вернет истинность для любого ребенка. Можно предоставить запасной узел, который будет представлен, если предикат возвращает ложные для всех детей. В противном случае ничего не будет отображено.

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции
`predicate`	✕	`function` / `object`	Смотрите предикаты для получения дополнительной информации
`fallback`	✕	`node`	Альтернативный контент, который будет отображаться, если предикат возвращает false по всем элементам.

Пример

 const collection = [
  { id : 'a' , username : 'sickskillz' , hasWon : false } ,
  { id : 'b' , username : 'dabomb12345' , hasWon : false } ,
] ;

< Some
  elementType = { Leaderboard }
  collection = { collection }
  predicate = { { hasWon : true } }
>
  { user => < LeaderboardRow key = { user . id } { ... user } /> }
</ Some >

`<Sort>`

Сортирует детей на основе компаратора.

Реквизит

Проп	Необходимый	Типы	Примечания
`collection`	✓	[ `any` ]	Может быть неявно передано родительским помощникам коллекции
`comparator`	✓	`function` / `object`	Смотрите компараторы для получения дополнительной информации
`descending`	✕	`boolean`	Сортировать ли в порядке убывания, при предоставлении компаратора «строки». По умолчанию `false` (строковые компараторы сортируют в восхождении).

Пример

 const collection = [
{ id : 'a' , name : 'apple' , price : 1.00 } ,
{ id : 'b' , name : 'banana' , price : 5.00 } ,
{ id : 'c' , name : 'carrot' , price : 2.50 } ,
] ;

< Sort collection = { collection } comparator = "price" >
  { item => < StoreItem key = { item . id } { ... item } /> }
</ Sort >

Расширять

react collection helpers

React Collection Helpers

Набор композиционных компонентов для манипулирования коллекциями.

Быстрый пример

Живая демонстрация

Оглавление

Функции

Недостатки

Установка

Обратная связь разыскивается

Использование

Гиды

Ссылка на API

<Every>

Реквизит

Пример

<Filter>

Реквизит

Пример

<Find>

Реквизит

Пример

<First>

Реквизит

Пример

<Last>

Реквизит

Пример

<Map>

Реквизит

Пример

<Reject>

Реквизит

Пример

<Some>

Реквизит

Пример

<Sort>

Реквизит

Пример

`<Every>`

`<Filter>`

`<Find>`

`<First>`

`<Last>`

`<Map>`

`<Reject>`

`<Some>`

`<Sort>`