Giter Site home page Giter Site logo

styled-components / styled-components Goto Github PK

View Code? Open in Web Editor NEW
40.0K 362.0 2.5K 34.07 MB

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…

Home Page: https://styled-components.com

License: MIT License

JavaScript 13.76% HTML 0.09% CSS 0.15% TypeScript 86.00%
react css-in-js styled-components css

styled-components's Introduction


Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…

downloads: 600k/month Discord gzip size module formats: umd, cjs, esm Code Coverage

Upgrading from v5? See the migration guide.

Utilizing tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allow you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!

const Button = styled.button`
  color: grey;
`;

Alternatively, you may use style objects. This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.

const Button = styled.button({
  color: 'grey',
});

Equivalent to:

const Button = styled.button`
  color: grey;
`;

styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

Supported by Front End Center. Thank you for making this possible!


See the documentation at styled-components.com/docs for more information about using styled-components!

Quicklinks to some of the most-visited pages:


Example

import React from 'react';

import styled from 'styled-components';

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

function MyUI() {
  return (
    // Use them like any other React component – except they're styled!
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
    </Wrapper>
  );
}

This is what you'll see in your browser:


Looking for v5?

The main branch is for the most-current version of styled-components, currently v6. For changes targeting v5, please point your PRs at the legacy-v5 branch.


Built with styled-components

A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There are also a whole lot of interesting apps and sites that people have built using styled-components.

Make sure to head over to awesome-styled-components to see them all! And please contribute and add your own work to the list so others can find it.


Contributing

If you want to contribute to styled-components please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process.

Please also note that all repositories under the styled-components organization follow our Code of Conduct, make sure to review and follow it.


Badge

Let everyone know you're using styled-components β†’ style: styled-components

[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)

Contributors

This project exists thanks to all the people who contribute. [Contribute].


Backers

Thank you to all our backers! πŸ™ [Become a backer]


Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]


License

Licensed under the MIT License, Copyright Β© 2016-present Glen Maddern and Maximilian Stoiber.

See LICENSE for more information.


Acknowledgements

This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.

Special thanks to @okonet for the fantastic logo.

styled-components's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

styled-components's Issues

Styled-components break with react-router v4

Trying to make use of a styled-component with react-router v4 breaks with the following error

StyledComponent.js:71 Uncaught TypeError: subscribe is not a function
componentWillMount @ StyledComponent.js:71

Confirmed that this isn't an issue with react-router because
This works

const Li = props => <li style={{display: "inline-block"}} {...props}/>

But this fails and throws the above error when used with react-router v4

const Li = styled.li`
display: inline-block` 

Issues with getting :root selector to work

Hey guys,

really like this implementation, makes a lot of sense to me when you need this approach of styling a JS-app. However I failed to get the :root { } selector working in a simple test.

The goal is to use CSS Custom Properties in an app which are declared in the :root element (this equals the html element but the selector has differences in specificity).

In plain CSS, the demo can be seen here, if you have a CSS Custom Property supporting browser.

Any hint would be appreciated but if it’s not possible to use that at the moment, no worries β€” then take this report as a β€œI’d love to see support for this at some point in future”. :)

Stricter typings

We need to tighten our flow typings. People will probably (even if we don't explicitly export them) start using them in their code, and it might break stuff.

Integrate Danger

Danger is a bot that let's you write rules that are used to automatically check each PR for common problems. (like "you forgot to add a changelog entry")

It's written in Ruby (a JS port is being worked on, though it's not ready yet), and I haven't done Ruby in a while, so I'd love if somebody from the community could help out with this!

I might have to do some setup for the repo or a bot, but I'm sure we can figure that out as we go along in a PR.


Some of the rules I imagine would be useful for this repo:

  • Enforce CHANGELOG.md entries for each PR that touches .js files
  • A change was made in StyledComponent.js that wasn't made in StyledNativeComponent.js – warn that this might have to be done
  • Warn that changes to ThemeProvider.js, StyledComponent.js or StyledNativeComponent.js might be semver major changes if they touch the context stuff
  • Don't let testing shortcuts be merged into master (fit, fdescribe, it.only, describe.only)
  • Enforce rebases to remove "Merge master into bla" commits?
  • Enforce that a test must be added for the changes? (not sure if this makes sense for everything, maybe enforce for all .js files in the src/ folder except for src/vendor)
  • Enforce a certain commit style? Not sure if this is really necessary.
  • Anything else you can come up with that might be an issue with PRs more often than not!

Styling placeholders (potentially others)

This currently does not work at all, because our "parser" doesn't support it:

::-webkit-input-placeholder {
  some: styles;
}

Possibly related to #6 if we end up implementing the PostCSS parser

Media queries

Media queries should not require a user to understand partial imports and css. This should work out of the box:

const Component = styled.div`
  display: block;
  @media (max-width: 500px) {
    display: inline-block;
  }
`;

Think about non-JSX users

I don't use JSX, but libraries like glamor are still a pleasure to use:

dom.div(
  { ...style({ border: "1px solid black" }) },
  children
)

The problem with styled-components is that is forces you to always create new components. So now I have to do something like this:

const Title = React.createFactory(styled.div`border: 1px solid black`);
Title({}, children);

Obviously not ideal. I don't know if you want to care about this or not, but it's definitely a blocker for me to use this library.

An option would be to re-export all of the tags, and have them automatically wrap the result in a createFactory. So I would import styled-components/wrapped or something instead, and I wouldn't have to use createFactory.

Improve browser support

Using styled-components.com as an example, page rendering looks a bit spotty? I have similar experience with my own code using styled-components when tested on my Mac using the VirtualBox VMs provided by Microsoft. What are other people experiences? Is a polyfill needed?

Browser test results

Browser screenshots powered by BrowserStack

Components

Currently, doing this won't work (React throws an error that you have to return an element, null or etc.):

const Component = (props) => {
  return styled.div`
    background-color: ${props.bg};
  `;
}

You have to do this to make it work:

const Component = (props) => {
  const Primitive = styled.div`
    background-color: ${props.bg};
  `;
  return <Primitive />;
}

Which seems unnecessary, verbose and confusing. I'm not sure if we can do something against this though?

Order of CSS injection

Just hit a problem:

const SVG = styled.svg`
  line {
    stroke-width: 1px;
  }
`

const Horizontal = styled.g`
  line {
    shape-rendering:crispEdges;
  }
`

const Vertical = styled.g`
  line {
    stroke-width: 1.5px;
  }
`

export default () => (
  <SVG>
    <Horizontal>
      <line x1={0} y1={0} x2={width} y2={0}/>
    </Horizontal>
    <Vertical>
      <line x1={0} y1={0} x2={width} y2={height}/>
    </Vertical>
  </SVG>
)

Because Horizontal and Vertical get rendered before SVG, and I'm only injecting the styles on render, ._compile_from_Vertical line {} appears before ._compiled_from_SVG line {}. They have the same specificity of course and so SVG wins.

Injected source should be in the same order it is written, not in the order it's rendered.

Local development?

I'm trying to hack on some things locally with styled-components but I get this error both with npm linking and with a webpack alias pointing to src/index.js or lib/index.js:

ERROR in ../lib/constructors/keyframes.js
Module not found: Error: Can't resolve 'glamor/lib/hash' in '/Users/dev/Docum
ents/workspace/scratch/styled-components/lib/constructors'

...
ERROR in ../lib/models/ComponentStyle.js
...
ERROR in ../lib/utils/autoprefix.js

All "module not found" errors. Not sure what's up? Do you have a workflow for working locally?

Fix UMD build

Something's off with the UMD build, we're doing something wrong. Need to work out what it should be doing and fix that!

Is there a way to add / remove !important globally to each value?

I have a project here which already uses a custom emulation of scoped styles (in a way how styled-components and CSSModules et al work β€” by randomizing class names). However, I really like the way styled-components is doing the implementation and I’m considering switching over.

To ensure my styles are as scoped as possible, I’m adding !important to each value in my styles at the moment. It would be far better though if a tool like styled-components would do that for me automatically for all of my values in the codebase.

Is there any way to enable this as an option perhaps? It would be really useful for a better approximation to native scoped styles.

Version

1.0.6

Reproduction

http://www.webpackbin.com/416pMDaR-

Setup linting

We have a pretty inconsistent style across the codebase, need to get a linter up and running.

Ability to normalize.css

Congrats to Max and Glen! 🍻 styled components looks fantastic πŸŽ‰

What do you guys think if we add in API ability to Normalize.css maybe in injectGlobal .

Super expression is undefined when using rollup

When used with rollup it throws an error at runtime:

Uncaught TypeError: Super expression must either be null or a function, not undefined
    at _inherits (root.js:25)
    at root.js:38
    at root.js:161
    at createCommonjsModule (index.js:3)
    at processor.js:254

With webpack works fine. And the app works fine until I add styled-components.
I wasn't sure if issue it here since it can be a problem with rollup-plugin-commonjs or even react...
I left a reproduction repo here: NicolasParada/styled-components

CSS overriding, className vs StyledComponent

Passing a className prop to a StyledComponent works fine, but if a specific CSS property (e.g. background-color) is passed in via a className prop and also defined in the StyledComponent, the StyledComponent will win.

In the example below <div> will have a green background. Should the CSS properties sent via the className prop override any matching CSS properties in the StyledComponent? Either way, it would be great to have this documented, happy to submit a PR.

// StyledUpYo.js
const StyledUpYo = styled.div`background-color: green;`;
// styles.css
.styledUpYo {
  background-color: red;
}
import StyledUpYo from './StyledUpYo';
import styles from './styles.css';

const Contrived = (props) => (
  <StyledUpYo className={styles.styledUpYo}>
    {props.children}
  </StyledUpYo>
);

How do you deal with dynamically inputs?

First of all: amazing work!

I have seen this example by @mxstbr

const Title = styled.h1`
  font-size: 3em;
  color: ${constants.brandColor};
  margin-bottom: 0.25em;
`;

From what I understand this would generate CSS, but what would happen in this case:

const MyComponent extends React.Component {

  state = { left: 0 };

  render() {
    const FlyingBall = styled.div`
      position: absolute;
      width: 1rem;
      height: 1rem;
      left: ${this.state.left}
    `;

    return <FlyingBall />;
}

I would expect this generates only the CSS with left: 0;. Is this correct?

Add Typescript type definitions

I'm almost sorry to bring this up since styled-components is using Flow (which is great!). Would you consider adding type definitions for Typescript (2) as well? That would be awesome for the other half of the community which went for Typescript instead of Flow for undefined reasons. πŸ˜†

HMR [ThemeProvider]

Version

1.0.5

Steps to reproduce

Just add theming to your application.

Expected Behavior

Hot reload application.

Actual Behavior

Bug

Little fix

ThemeProvider:40
if (this.context[CHANNEL]) { this.unsubscribeToOuter(); }
||
define function unsubscribeToOuter previously, maybe in constructor ?
this.unsubscribeToOuter = () => ();
something like this...

Bundle Size

Progress

Bare 1.0.0 1.0.3
Size 90kB 1.1MB 381kB

Original Issue

As a test, I integrated the (very minimal) CSS we use in react-resizable for use with styled-components.

https://github.com/STRML/react-resizable/tree/styled-components

This increases the bundle size from 90kB to 1.1MB.

Is this intended for use in libraries, or is its goal more toward application use with an eventual extraction step to keep it out of the runtime?

Requirements checklist

This is a living document to figure out how we compare vs. the requirements outlined in /spec

β˜‘οΈ work well for open source components that are themeable and not opinionated about build requirements (styled(LibStyledComp))
β˜‘οΈ has a good solution for overriding styles on child elements (styled(StyledComp))
β˜‘οΈ server side rendering
β˜‘οΈ don’t break inline styles (untried, but likely true)
☐ fast at runtime (pre-buildable?)
β˜‘οΈ styles are colocated with components
β˜‘οΈ isolated as much as possible (styles == component)
β˜‘οΈ overridable and preferably not opinionated about how (we’re talking about CSS after all)
β˜‘οΈ supports css stuff like :hover, media queries (i.e. you shouldn’t be blocked from doing anything you can do with css)
❌ doesn’t create a bunch of wrapper components
β˜‘οΈ small and lightweight enough that you don't think twice about having it as a dependency

Configuration

This is really bugging me. How do we configure styled-components?

We need a way to use className-based styling vs styled-based styling for Native, but so far we talked about doing two entry points

import styled from 'styled-components'
import styled from 'styled-components/native'

The first returns DOM-based aliases (styled.div, styled.h1) etc and uses className under the hood. The second will return Native aliases (styled.View) and use styles under the hood. That seems fine, but what about smaller changes like the classname generation?

Do we just do something like:

import styled, { classNameGenerators } from 'styled-components'
styled.configure({
  classNames: classNameGenerators.emojis
})

I don't terribly like mutating stuff like this but it seems better than the alternatives. Perhaps we could raise an error if configure is called after any styled components are rendered to avoid weird edge cases.

If something like configure was ok, we could drop the second entry point for styled-components/native and do something like:

import styled from 'styled-components'
import { Text, View } from 'react-native'
styled.configure({
  inline: true,
  alias: [Text, View]
})

Not a terribly big fan of that either but it feels better than having a separate entry point for every configuration change. Thoughts?

Create component containing children using styled API

So obviously you can create a component like so:

const Button = styled.button`
  background: #ccc;
`;

But can you create that same component so that it has children, without needing to create another component? I.e.:

const ButtonWithIcon = () => (
  <Button>
    <i className="fa" />
  </Button>
);

I just want Button to always contain an icon.

Cheers!

Keyframes

We need to get keyframes to work, maybe something like this?

styled.div`
@keyframes {
  0% { color: transparent; }
  100% { color: awesome; }
}
`;

Ordering bug

This one has kinda no good resolution :(

const TomatoText = styled.link`
  color: tomato;
  border-color: tomato;
`;

const Button = styled.button`
  background: white;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

Because the hash of TomatoButton CSS matches exactly TomatoText it doesn't re-inject anything. And so it doesn't override Button.

The obvious solution is to only test for uniqueness for each styled.x separately, but that could cause other effects:

const A = styled.div`
  color: black;
`
const B = styled(A)`
  color: red;
`

B would be red as you expect. But if you added:

const C = styled.div`
  color: black;
`

after that (and had per-instance uniqueness checking) you would inject CSS with the same hashed classname as A after the other two. And because B has both classes applied, it'll suddenly switch back to Black.

But then we can't really do the Aphrodite approach because it's not like we can walk styled(A) and extract all the styles from it. That kind of interdependence breaks component boundaries anyway. Still, we need something that works as expected for these two examples.

Which I think we can do, let's add something to the string that's different for each component so the hashes of two components will never match, therefore neither will their classnames.

The only problem is, what can we use? I don't want to use a simple counter because that feels... wrong. I think it would break any plans to do SSR right and do static-CSS extraction (both right now are 100% possible). My best thought right now is this:

/* my-component.js */
const A = styled.div`
  /* styles here */
`._salt('src/my-component.js', 'A')

Something that could be auto-generated by a Babel plugin. Then, in dev, we could generate BEM style classnames like:

.my-component_A_ab3718 {}
.my-component_B_e4d31f {}
.my-component_C_e99a1f {}

We wouldn't depend on it but it'd be like a "If you want nice classnames, want to SSR or CSS extraction, install this babel plugin".

Unless there's anything else we can use to salt each hash?

Comma separated pseudos

This currently only applies the styles on focus, but not on hover:

const Component = styled.div`
  background-color: blue;

  &:hover,
  &:focus {
    background-color: red;
  }
`;

What was the reason for the order of the arguments that was chosen?

Any reason you didn't choose to receive the Target last?

It would allow this:

import React from 'react';
import styled from 'styled-components';

const styleTitle = styled`
  text-align: center;
  color: palevioletred;
`;

const Title = styleTitle('h1')
const Subtitle = styleTitle('h4')

Basically styled would return a higher-order component that takes a component and applies the ruleset that was previously created. (It might also create an opportunity at some point to compose rulesets.)

I might not be thinking this through - obviously I only saw the library yesterday. And also, I've been working with ramda and recompose a lot recently. However, it does feels more right to me that the value you are applying a function to would be the last argument that is supplied to it rather than the first.

Babel transform

We need a way (probably babel transform?) to extract and precompile the static styles of our components!

Extracting static styles is actually not what we want, we want to pre-parse the CSS in a build step but leave it in the JS: See this comment

Has anybody done this before? I know I haven't…

Overriding

For some reason I thought this would work:

const Block = styled.div`
  background-color: blue;
  color: white;
`;

// Override Block and give it a red background, using all other styles (i.e. just adding another class that overrides the background-color
const EmergencyBlock = styled(Block)`
  background-color: red;
`;

Can we make this work? That would be a great overriding mechanism.

Test ReactNative

Currently we have some e2e tests (and some unit tests, though not enough yet) in place to ensure nothing breaks unexpectedly with changes.

These only test the web version of react though, we somehow need to make sure the changes between StyledNativeComponent and StyledComponent (and any other possible components) in sync. Any ideas how we could do that?

Postcss transform

Would be nice if there was a babel transform to run the template literal through a configurable postcss pipeline.

End-to-end testing

We need some verification of our human-facing API. Basically, that

const X = styled.div`
  some: rule;
`
export default () => <X/>

renders the exact HTML and CSS we want. Things I'd like to be able to verify using this:

  • that multiple components' CSS gets injected in the correct order regardless of which order they're rendered in
  • that using function callbacks with a series of params gives us the result we want
  • that two components with the same CSS generates only one copy of CSS injected into the document
  • that JS style comments don't break the parser, in fact are potentially even detected and warned about
  • That global works and injects as we expect it to

Heaps more, too, but this is a start.

ReactNative compatibility

This might be the killer feature. Making it possible to reuse CSS across platforms would be epic!

Animations/Font Face

Not sure how Aphrodite handles these (they have to be global), but currently, I don't.

Parser implementation

So I think I've got a vague sense of the scope of the syntax we support.

/* 
  Primary entry point, wraps everything in a hashed classname
  and returns a smart React component
*/
styled.tagName`
  simple: rules;
  @media (query) {
  }
  &:pseudo,
  &:selectors {}
  > nesting {
    as: well;
  }
`

/*
  Same syntax but can inject global CSS when you need it.
  (This could be a top-level export `global` instead of `styled.global`)
*/
styled.global`
html {
  font-size: 16px;
}
@font-face {
  probably: useful too;
}
`

/* 
  Special syntax for keyframes because they're global and need
  to be hashed like class names but aren't tied to a tag.
  Again, this syntax could totes change.
*/
styled.keyframes`
  0% { some: thing; }
  100% { something: else; }
`

Basically, at this point, that's totally valid CSS so an existing parser should work. But, it's not the whole story...

Interpolations

const size = 100;
const sizeWithUnits = '1rem';
const wholeRule = 'color: black;'
const multipleRules = `display: flex; flex-direction;`
const withNesting = `
  &:hover,&:active {
    text-decoration: underline;
  }
`

styled.tagName`
  width: ${size}px;
  margin: ${sizeWithUnits};
  ${wholeRule}
  ${multipleRules}
  ${withNesting}
`

These are all static interpolations. We can just call toString() on all these before the parser runs. So they're fine.

let ready = false;
const Tag = styled.tagName`
  ${ready ? 'display: block' : 'display: none'}
  ${props => `font-size: ${props.size}px;`}
  ${({bold}) => bold && 'font-weight: 900'}
`

export default () => {
  ready = true
  return <Tag size={18} bold/>
}

This is the problem, it follows on from my work in #24. I really think makes our approach vastly more powerful than the CSS-in-JS approaches I've seen, so I want to preserve this "delayed" rendering of these properties. As far as I can tell, the way I've used ready will never work because each interpolation is evaluated straight away. The only way to defer things is to interpolate a function:

let ready = false;
const Tag = styled.tagName`
  ${() => ready ? 'display: block' : 'display: none'}
`

That seems ok to me. If you interpolate a function, we defer it to render time and evaluate it every time. If you interpolate a value, we toString it and continue the parser.

We can either defer all CSS parsing until render time (which I think is a performance problem waiting to happen) or we can figure out a clever parser that parses the static bits and leaves holes for the dynamic bits. I would prefer doing it well, since we might find that it enables something to do with server-side rendering or build-time optimisations (like a Babel transform that extracts CSS a la Sheetify) but I don't have an idea of those quite yet.

Anyway, that's what we need I think. Now to invent a time machine to give me a chance to work on it!

ThemeProvider breaks react-storybook

I'd appreciate any pointers as I'm not sure where things break down when using styled-components ThemProvider with react-storybook. I only experience this problem when wrapping the styled component in ThemeProvider. I created a minimal example repo that demonstrates the problem I'm experiencing:

https://github.com/amsb/storybook_styled-components_example

Here's what happens when I attempt to navigate in storybook after viewing a styled component wrapped in ThemeProvider:

demo

Same behavior if I remove the AddOn and directly wrap the component in ThemeProvider in the story itself. Maybe some conflict with context management when using ThemeProvider that blocks updates? There are no errors in the console.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.