1.0.0 • Published 7 years ago
twreporter-react-listing-components v1.0.0
twreporter-react-listing-components
INSTALL
Need Dependencies:
yarn add react lodash prop-types react-router styled-components
Install the package:
yarn add twreporter-react-listing-components
USE
Topics
import { TopicsComponents } from 'twreporter-react-listing-components'
const { PageContent, TopSection, ListSection, PostsContainer, PostItem, TopicItem, LoadMore } = TopicsComponents
const Page = (props) =>(
<div>
<PageContent>
<TopSection topicName={props.topTopicName} topicUrl={props.topicUrl}>
<TopicItem
key={props.topTopic.key}
title={props.topTopic.title}
updatedAt={props.topTopic.updatedAt}
description={props.topTopic.description}
imgUrl={props.topTopic.imgUrl}
imgAlt={props.topTopic.imgAlt}
isFull={props.topTopic.isFull}
url={props.topTopic.url}
/>
<PostsContainer>
{props.postsArray.map(post => (
<PostItem
key={post.key}
title={post.title}
imgUrl={post.imgUrl}
linkTo={post.linkTo}
linkTarget={post.linkTarget}
/>
))}
</PostsContainer>
</TopSection>)}
<ListSection>
{props.topicsArray.map(topic => (
<TopicItem
key={topic.key}
title={topic.title}
updatedAt={topic.updatedAt}
description={topic.description}
imgUrl={topic.imgUrl}
imgAlt={topic.imgAlt}
isFull={topic.isFull}
url={topic.url}
/>
))}
</ListSection>
</PageContent>
</div>
)
Developement
Source code
- For this package:
/listing-components/src/
- Shared by all packages under
twreporter-react-components
:/shared/
gulp.watch
Automatically rebuild while files change.
cd twreporter-react-components/listing-components
npm run dev
Build (pre-publish)
cd twreporter-react-components/listing-components
npm run build
Pubish
cd twreporter-react-components/listing-components
npm publish
1.0.0
7 years ago
1.0.0-beta.12
7 years ago
1.0.0-beta.11
7 years ago
1.0.0-beta.10
7 years ago
1.0.0-beta.9
7 years ago
1.0.0-beta.8
7 years ago
1.0.0-beta.7
7 years ago
1.0.0-beta.6
7 years ago
1.0.0-beta.5
7 years ago
1.0.0-beta.4
7 years ago
1.0.0-beta.3
7 years ago
1.0.0-beta.2
7 years ago
1.0.0-beta.1
7 years ago