Skip to content

Commit 551e5be

Browse files
ProskyneteProskynete
committed
chore: modify readme
1 parent f8c40bc commit 551e5be

File tree

1 file changed

+71
-133
lines changed

1 file changed

+71
-133
lines changed

‎README.md‎

Lines changed: 71 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<p>A simple component to generate a responsive vertical timeline</p>
77
</div>
88

9-
![Vertical Timeline Component React](https://i.imgur.com/KBqLIlK.png 'How to see vertical-timeline-component-react')
9+
![Vertical Timeline Component React](<https://dsc.cloud/83db8c/Captura%20de%20Pantalla%202022-08-31%20a%20la(s)%2020.12.38.png> 'How to see vertical-timeline-component-react')
1010

1111
## Status
1212

@@ -26,10 +26,7 @@
2626
<ul>
2727
<li><a href="#timeline">Timeline</a></li>
2828
<li><a href="#container">Container</a></li>
29-
<li><a href="#year-content">YearContent</a></li>
30-
<li><a href="#body-content">BodyContent</a></li>
31-
<li><a href="#section">Section</a></li>
32-
<li><a href="#description">Description</a></li>
29+
<li><a href="#content">Content</a></li>
3330
</ul>
3431
</li>
3532
<li><a href="#how-to-use">How to use it</a></li>
@@ -41,7 +38,7 @@
4138
To install as npm dependency
4239

4340
```sh
44-
npm install --save vertical-timeline-component-react
41+
npm install --save vertical-timeline-component-react@latest
4542
```
4643

4744
<p align="right"><a href="#top">🔝</a></p>
@@ -60,90 +57,50 @@ This is the wrapper component that creates the vertical timeline.
6057

6158
- Props
6259

63-
| name | Type | Required | Values Allowed | default values | Description |
64-
| ---------- | ------ | -------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
65-
| theme | object | false | colors | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components |
66-
| lang | string | false | `en`, `es`, `de`, `tr` or `zh_CN` | `en` | Change the language `from` and `to` texts and change the format in the dates |
67-
| dateFormat | string | false | `only-number`, `short`, `with-weekday` or `full` | `only-number` | Change the presentation format of dates |
60+
| name | Type | Required | Values Allowed | default values | Description |
61+
| ---------- | ------- | -------- | ------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- |
62+
| theme | object | false | colors | { yearColor: "#888888", lineColor: "#c5c5c5", dotColor: "#c5c5c5", borderDotColor: "#ffffff", titleColor: "#cccccc", subtitleColor: "#888888", textColor: "#cccccc" } | Set colors in all components |
63+
| lang | string | false | `en`, `es`, `de`, `tr` or `zh` | `en` | Change the language `from` and `to` texts and change the format in the dates |
64+
| dateFormat | string | false | `only-number`, `short`, `with-weekday` or `full` | `only-number` | Change the presentation format of dates |
65+
| collapse | boolean | false | `true` or `false` | `false` | Allow collapse the description of Content component |
6866

69-
`dateFormat`: Receive only one of four options (The options are same the [moment.js](https://momentjs.com/) using)
67+
`dateFormat`: The next table shows the different formats that can be used in the `dateFormat` prop and the result that will be displayed.
7068

71-
| | `only-number` | `short` | `with-weekday` | `full` |
72-
| :--------------------------: | ------------- | ---------------- | ----------------------- | ------------------------------ |
73-
| English (`en`) | `MM/D/YYYY` | `MMM DD, YYYY` | `ddd, MMM DD, YYYY` | `dddd, MMMM DD, YYYY` |
74-
| Spanish (`es`) | `D/MM/YYYY` | `DD MMM YYYY` | `ddd, DD [de] MMM YYYY` | `dddd, DD [de] MMMM [de] YYYY` |
75-
| German (`de`) | `D.MM.YYYY` | `DD.MMM.YYYY` | `ddd., DD. MMM. YYYY` | `dddd, DD. MMMM YYYY` |
76-
| Turk (`tr`) | `DD.MM.YYYY` | `DD MMM YYYY` | `DD MMM YYYY ddd` | `DD MMMM YYYY dddd` |
77-
| Simplified Chinese (`zh_CN`) | `YYYY/MM/D` | `YYYY年MM月DD日` | `YYYY年MMM月DD日` | `YYYY年MM月DD日dddd` |
69+
| | `only-number` | `short` | `with-weekday` | `full` |
70+
| :-----------------------: | ------------- | ---------------- | ----------------------- | ------------------------------ |
71+
| English (`en`) | `MM/D/YYYY` | `MMM DD, YYYY` | `ddd, MMM DD, YYYY` | `dddd, MMMM DD, YYYY` |
72+
| Spanish (`es`) | `D/MM/YYYY` | `DD MMM YYYY` | `ddd, DD [de] MMM YYYY` | `dddd, DD [de] MMMM [de] YYYY` |
73+
| German (`de`) | `D.MM.YYYY` | `DD.MMM.YYYY` | `ddd., DD. MMM. YYYY` | `dddd, DD. MMMM YYYY` |
74+
| Turk (`tr`) | `DD.MM.YYYY` | `DD MMM YYYY` | `DD MMM YYYY ddd` | `DD MMMM YYYY dddd` |
75+
| Simplified Chinese (`zh`) | `YYYY/MM/D` | `YYYY年MM月DD日` | `YYYY年MMM月DD日` | `YYYY年MM月DD日dddd` |
7876

7977
<p align="right"><a href="#top">🔝</a></p>
8078

8179
<h3 id="container">Container</h3>
8280

83-
Each event in the timeline will be represented by the `Content` component. This component receive only two children's, the first is `YearContent` and the second is `BodyContent`. There can be multiple repeating instances of this component inside `Timeline` wrapper.
84-
85-
- Childrens
86-
87-
| Number of children | Required | Value Allowed |
88-
| ------------------ | -------- | ------------------------------- |
89-
| 2 | true | `YearContent` and `BodyContent` |
90-
91-
<p align="right"><a href="#top">🔝</a></p>
92-
93-
<h3 id="year-content">YearContent</h3>
94-
95-
For each `Container` you need `YearContent` (like first children) since with this component you mark the events in the given year.
81+
This component is the container of the content of each year. It is required to have at least one `Container` component as a child of the `Timeline` component. It can have as many `Container` components as you want.
9682

9783
- Props
9884

99-
| Name | Type | Required | Values Allowed | default values | Description |
100-
| ----------- | ------- | -------- | --------------------------------- | -------------- | -------------------------------------------------------------------------------- |
101-
| startDate | string | true | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the start of the content or contents |
102-
| endDate | string | false | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the end of the content or contents |
103-
| currentYear | boolean | false | `true` or `false` | current year | The value is the current year, it is recommended to use it in the last Container |
104-
105-
<p align="right"><a href="#top">🔝</a></p>
106-
107-
<h3 id="body-content">BodyContent</h3>
108-
109-
For each `Container` you need `ContentBody` (like second children). This component will be the container of the one or more `Sections`.
110-
111-
- Childrens
112-
113-
| Number of children | Required | Value Allowed |
114-
| ------------------ | -------------------------------------------------- | ------------------------- |
115-
| Many | At least the first `Section` component is required | Only `Section` components |
85+
| Name | Type | Required | Values Allowed | default values | Description |
86+
| --------- | ------- | -------- | --------------------------------- | -------------- | -------------------------------------------------------------------------------- |
87+
| title | string | true | any string | does not apply | The title of this block time |
88+
| startDate | string | true | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the start of the content or contents |
89+
| endDate | string | false | `YYYY/MM/DD` - `YYYY/MM` - `YYYY` | does not apply | The date of the end of the content or contents |
90+
| today | boolean | false | `true` or `false` | current year | The value is the current year, it is recommended to use it in the last Container |
11691

11792
<p align="right"><a href="#top">🔝</a></p>
11893

119-
<h3 id="section">Section</h3>
120-
121-
This component is the container for one or more `Description`.
94+
<h3 id="content">Content</h3>
12295

123-
- Childrens
124-
125-
| Number of children | Required | Value Allowed |
126-
| ------------------ | ------------------------------------------------------ | ----------------------------- |
127-
| Many | At least the first `Description` component is required | Only `Description` components |
96+
For each `Container` you need one or more `Content` component. This component will be the container of the one or more `Sections`.
12897

12998
- Props
13099

131-
| Name | Type | Required | Description |
132-
| ----- | ------ | -------- | ----------------------------- |
133-
| title | string | true | It's the title of any section |
134-
135-
<p align="right"><a href="#top">🔝</a></p>
136-
137-
<h3 id="description">Description</h3>
138-
139-
This component can be the text of the description or a subtitle
140-
141-
- Props
142-
143-
| Name | Type | Required | Values Allowed | default values | Description |
144-
| ------- | ------ | -------- | --------------------------- | -------------- | ------------------------------------- |
145-
| variant | string | false | `subtitle` or `description` | `description` | Transform the format of the text |
146-
| text | string | true | Any text | does not apply | Show the description of the `Section` |
100+
| Name | Type | Required | Description |
101+
| ----------- | ---------------- | -------- | ---------------------------------------------------------------------------------- |
102+
| title | string | true | It's the title of one or many descriptions |
103+
| description | Array of strings | true | You can write anything you want, but remember that it is consistent with the title |
147104

148105
<p align="right"><a href="#top">🔝</a></p>
149106

@@ -154,14 +111,7 @@ The following snippet will show you how to use the library:
154111
**_Using class components:_**
155112

156113
```js
157-
import {
158-
Timeline,
159-
Container,
160-
YearContent,
161-
BodyContent,
162-
Section,
163-
Description,
164-
} from 'vertical-timeline-component-react';
114+
import { Timeline, Container, Content } from 'vertical-timeline-component-react';
165115

166116
const customTheme = {
167117
yearColor: '#405b73',
@@ -175,24 +125,18 @@ const customTheme = {
175125

176126
class Main extends Component {
177127
render() {
178-
return(
179-
<Timeline theme={customTheme} dateFormat='full'>
180-
<Container>
181-
<YearContent startDate='2020/07/01' currentYear />
182-
<BodyContent>
183-
<Section title='Title'>
184-
<Description variant='subtitle' text='Subtitle' />
185-
<Description text='Description' />
186-
<Description text='Another description' />
187-
</Section>
188-
189-
<Section title='Another title'>
190-
<Description text='Description' />
191-
<Description text='Another description' />
192-
</Section>
193-
</BodyContent>
128+
return (
129+
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse>
130+
<Container title="What is lorem Ipsum?" startDate="2020/12/02" today>
131+
<Content
132+
title="Lorem Ipsum"
133+
description={[
134+
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
135+
'Is simply dummy text of the printing and typesetting industry.',
136+
]}
137+
/>
194138
</Container>
195-
</Timeline>,
139+
</Timeline>
196140
);
197141
}
198142
}
@@ -202,44 +146,38 @@ class Main extends Component {
202146

203147
```js
204148
import {
205-
Timeline,
206-
Container,
207-
YearContent,
208-
BodyContent,
209-
Section,
210-
Description,
149+
Timeline,
150+
Container,
151+
YearContent,
152+
BodyContent,
153+
Section,
154+
Description,
211155
} from 'vertical-timeline-component-react';
212156

213157
const Main = () => {
214-
const customTheme = {
215-
yearColor: '#405b73',
216-
lineColor: '#d0cdc4',
217-
dotColor: '#262626',
218-
borderDotColor: '#d0cdc4',
219-
titleColor: '#405b73',
220-
subtitleColor: '#bf9765',
221-
textColor: '#262626',
222-
};
223-
224-
return (
225-
<Timeline theme={customTheme} dateFormat='full'>
226-
<Container>
227-
<YearContent startDate='2020/07/01' currentYear />
228-
<BodyContent>
229-
<Section title='Title'>
230-
<Description variant='subtitle' text='Subtitle' />
231-
<Description text='Description' />
232-
<Description text='Another description' />
233-
</Section>
234-
235-
<Section title='Another title'>
236-
<Description text='Description' />
237-
<Description text='Another description' />
238-
</Section>
239-
</BodyContent>
240-
</Container>
241-
</Timeline>
242-
);
158+
const customTheme = {
159+
yearColor: '#405b73',
160+
lineColor: '#d0cdc4',
161+
dotColor: '#262626',
162+
borderDotColor: '#d0cdc4',
163+
titleColor: '#405b73',
164+
subtitleColor: '#bf9765',
165+
textColor: '#262626',
166+
};
167+
168+
return (
169+
<Timeline lang="en" theme={customTheme} dateFormat="only-number" collapse>
170+
<Container title="What is lorem Ipsum?" startDate="2020/12/02" today>
171+
<Content
172+
title="Lorem Ipsum"
173+
description={[
174+
"Is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard",
175+
'Is simply dummy text of the printing and typesetting industry.',
176+
]}
177+
/>
178+
</Container>
179+
</Timeline>
180+
);
243181
};
244182
```
245183

0 commit comments

Comments
 (0)