Skip to content

Commit

Permalink
build: fixed solid.js readme and website updated with all frameworks
Browse files Browse the repository at this point in the history
  • Loading branch information
@matteobruni
matteobruni committed Jun 29, 2021
1 parent bc47f33 commit 3321a95
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 132 deletions.
245 changes: 115 additions & 130 deletions components/solid/README.md
View file
Expand Up @@ -29,34 +29,19 @@ _Remote url_
```javascript
import Particles from "solid-particles";

class App extends Component {
constructor(props) {
super(props);

this.particlesInit = this.particlesInit.bind(this);
this.particlesLoaded = this.particlesLoaded.bind(this);
}

particlesInit(main) {
console.log(main);

// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
}

particlesLoaded(container) {
console.log(container);
}

render() {
function App() {
return (
<Particles
id="tsparticles"
url="http://foo.bar/particles.json"
init={this.particlesInit}
loaded={this.particlesLoaded}
/>
<div class="App">
<Particles id="tsparticles" options={{
background: {
color: "#000"
},
fullScreen: {
enable: true
}
}}/>
</div>
);
}
}
```

Expand All @@ -66,110 +51,110 @@ _Options object_
import Particles from "solid-particles";

class App extends Component {
constructor(props) {
super(props);

this.particlesInit = this.particlesInit.bind(this);
this.particlesLoaded = this.particlesLoaded.bind(this);
}

particlesInit(main) {
console.log(main);

// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
}

particlesLoaded(container) {
console.log(container);
}

render() {
return (
<Particles
id="tsparticles"
init={this.particlesInit}
loaded={this.particlesLoaded}
options={{
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
);
}
constructor(props) {
super(props);

this.particlesInit = this.particlesInit.bind(this);
this.particlesLoaded = this.particlesLoaded.bind(this);
}

particlesInit(main) {
console.log(main);

// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
}

particlesLoaded(container) {
console.log(container);
}

render() {
return (
<Particles
id="tsparticles"
init={this.particlesInit}
loaded={this.particlesLoaded}
options={{
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
);
}
}
```

Expand Down
21 changes: 19 additions & 2 deletions website/index.html
View file
Expand Up @@ -114,9 +114,18 @@
<a class="dropdown-item"
href="https://github.com/matteobruni/tsparticles/tree/main/components/preact"
target="_blank">Preact</a>
<a class="dropdown-item"
href="https://github.com/matteobruni/tsparticles/tree/main/components/riot"
target="_blank">Riot.js</a>
<a class="dropdown-item"
href="https://github.com/matteobruni/tsparticles/tree/main/components/solid"
target="_blank">Solid.js</a>
<a class="dropdown-item"
href="https://github.com/matteobruni/tsparticles/tree/main/components/svelte"
target="_blank">Svelte</a>
<a class="dropdown-item"
href="https://github.com/matteobruni/tsparticles/tree/main/components/web"
target="_blank">Web Components</a>
</div>
</li>
</ul>
Expand Down Expand Up @@ -247,13 +256,21 @@ <h2>Which framework are you using?</h2>
<a href="https://github.com/matteobruni/tsparticles/tree/main/components/preact"
target="_blank" class="btn btn-block btn-sm btn-light m-1">Preact</a>
</div>
<div class="col-md-6 col-lg-3">
<a href="https://github.com/matteobruni/tsparticles/tree/main/components/riot"
target="_blank" class="btn btn-block btn-sm btn-light m-1">Riot.js</a>
</div>
<div class="col-md-6 col-lg-3">
<a href="https://github.com/matteobruni/tsparticles/tree/main/components/solid"
target="_blank" class="btn btn-block btn-sm btn-light m-1">Solid.js</a>
</div>
<div class="col-md-6 col-lg-3">
<a href="https://github.com/matteobruni/tsparticles/tree/main/components/svelte"
target="_blank" class="btn btn-block btn-sm btn-light m-1">Svelte</a>
</div>
<div class="col-md-6 col-lg-3">
<a href="https://github.com/matteobruni/tsparticles/tree/main/components/riot"
target="_blank" class="btn btn-block btn-sm btn-light m-1">Riot.js</a>
<a href="https://github.com/matteobruni/tsparticles/tree/main/components/web"
target="_blank" class="btn btn-block btn-sm btn-light m-1">Web Components</a>
</div>
</div>
</div>
Expand Down

0 comments on commit 3321a95

Please sign in to comment.